Created
February 22, 2018 16:03
-
-
Save featheredtoast/54b96f7f716caf5f1669bfa62a6c7ca8 to your computer and use it in GitHub Desktop.
css grid demo
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
| body { | |
| margin: 0; | |
| height: 100vh; | |
| background-color: white; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 120; | |
| grid-template-rows: 50px auto 20px; | |
| grid-template-areas: | |
| "header header header" | |
| "secondary main sidebar" | |
| "footer footer footer"; | |
| } | |
| header { | |
| background: pink; | |
| grid-area: header; | |
| } | |
| main { | |
| background: green; | |
| grid-area: main; | |
| } | |
| div { | |
| background: brown; | |
| grid-area: secondary; | |
| } | |
| nav { | |
| background: blue; | |
| grid-area: sidebar; | |
| } | |
| footer { | |
| background: red; | |
| grid-area: footer; | |
| } |
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
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="css-grid.css"> | |
| </head> | |
| <body> | |
| <header> | |
| header welcome in | |
| </header> | |
| <nav> | |
| nav elements~ | |
| </nav> | |
| <main> | |
| main content here yay | |
| </main> | |
| <div> | |
| </div> | |
| <footer> | |
| footer | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment