Created
July 25, 2018 18:39
-
-
Save prof3ssorSt3v3/a1dc095ba49d9df971c62bef3d7eba7b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CSS Grids - Named Grid Areas</title> | |
| <meta name="viewport" content="width=device-width"> | |
| <link rel="stylesheet" href="main.css"/> | |
| <style> | |
| p>span{ | |
| font-weight: 900; | |
| } | |
| .intro{ | |
| grid-area: A; | |
| } | |
| .sidebar{ | |
| grid-area: B; | |
| } | |
| .main{ | |
| grid-area: C; | |
| } | |
| .foot{ | |
| grid-area: D; | |
| } | |
| main{ | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| grid-gap: 2rem; | |
| grid-template-areas: | |
| "A A" | |
| "B C" | |
| "D D"; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>CSS Grids - Named Grid Areas</h1> | |
| </header> | |
| <main> | |
| <p class="intro"><span>Area A</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere vitae voluptates repellendus aspernatur, culpa, incidunt veniam! A unde, nostrum incidunt laborum vero animi harum tempora eveniet similique quae ducimus omnis.</p> | |
| <p class="sidebar"><span>Area B</span> Consequuntur iure neque optio perspiciatis cumque beatae corrupti blanditiis voluptatibus perferendis impedit et fuga doloremque nam porro nisi magni exercitationem laboriosam architecto, dicta ea nesciunt? Fugiat doloremque animi, repudiandae perspiciatis!</p> | |
| <p class="main"><span>Area C</span> Odio minus quia laudantium, quibusdam itaque ad nostrum cumque, commodi molestias reiciendis velit, cupiditate debitis expedita qui. Eum, rerum eius beatae! Culpa, quod vero ducimus porro saepe pariatur odit sit.</p> | |
| <p class="foot"><span>Area D</span> Eum blanditiis molestiae ullam aliquid, tempora, doloribus voluptas adipisci consequuntur corporis quia iste commodi pariatur est consectetur labore excepturi ad atque laborum nihil optio, iusto repellendus eveniet. Aliquam, recusandae, tenetur.</p> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice!
Thanks!