Last active
May 2, 2021 16:47
-
-
Save drequeary/db7b965080abc26bf7feb8b02c976179 to your computer and use it in GitHub Desktop.
Simple example of Grid using template area names.
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"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Grid</title> | |
| <style> | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| font-family: "Open Sans"; | |
| font-size: 1.5rem; | |
| background: #1d1d1d; | |
| } | |
| .wrapper { | |
| width: 75%; | |
| margin: auto; | |
| display: grid; | |
| grid-template-areas: | |
| "header header header header header" | |
| "nav nav nav nav nav" | |
| "main main main sidebar sidebar" | |
| "footer footer footer footer footer"; | |
| grid-template-columns: 65% 1fr; | |
| grid-template-rows: auto; | |
| } | |
| p { | |
| line-height: 2; | |
| } | |
| a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| header { | |
| grid-area: header; | |
| background: #4bcffa; | |
| padding: 2%; | |
| } | |
| nav { | |
| grid-area: nav; | |
| background: #485460; | |
| text-align: center; | |
| padding: 1%; | |
| } | |
| nav a { | |
| margin: 3%; | |
| } | |
| nav a:hover { | |
| border-bottom: 3px solid white; | |
| } | |
| main { | |
| grid-area: main; | |
| background: white; | |
| } | |
| aside { | |
| grid-area: sidebar; | |
| background: #F2F2F2; | |
| } | |
| main, aside { | |
| padding: 3%; | |
| } | |
| footer { | |
| grid-area: footer; | |
| background: #0fbcf9; | |
| padding: 1%; | |
| } | |
| header, footer { | |
| text-align: center; | |
| } | |
| @media (max-width: 1024px) { | |
| .wrapper { | |
| width: 95%; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .wrapper { | |
| width: 100%; | |
| grid-template-areas: | |
| "header header header header header" | |
| "nav nav nav nav nav" | |
| "main main main main main" | |
| "sidebar sidebar sidebar sidebar sidebar" | |
| "footer footer footer footer footer"; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <header> | |
| <h1>Grid Layout</h1> | |
| </header> | |
| <nav> | |
| <a href="#">Home</a> | |
| <a href="#">About</a> | |
| <a href="#">Contact</a> | |
| </nav> | |
| <main> | |
| <h2>Page Title</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar dolor nec urna malesuada, vel tristique erat blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ac pulvinar ligula. Morbi ut sapien vel diam fringilla malesuada. Duis commodo egestas erat. Ut in facilisis lacus. Nullam semper dictum leo eu tincidunt. Quisque vel justo rhoncus, pellentesque magna a, maximus magna. Nunc vestibulum erat nec ipsum dapibus, eget faucibus est mollis. Aliquam malesuada nulla vel erat dignissim laoreet vel eget nisl. In pharetra mollis risus, nec finibus eros finibus sit amet. Nullam non accumsan felis. Cras rutrum id nibh sed maximus.</p> | |
| </main> | |
| <aside> | |
| <h3>Sidebar</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar dolor nec urna malesuada, vel tristique erat blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ac pulvinar ligula.</p> | |
| </aside> | |
| <footer> | |
| <small>Grid Layout Test</small> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment