Last active
April 20, 2021 13:30
-
-
Save drequeary/e0bf94ad5acb79821b8df92d3913f72b to your computer and use it in GitHub Desktop.
Simple example of Grid using template area.
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 2</title> | |
| <style> | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| font-family: "Open Sans"; | |
| font-size: 1.5rem; | |
| background: #1d1d1d; | |
| } | |
| .wrapper { | |
| display: grid; | |
| grid-template-columns: repeat(6, [col] 1fr); | |
| grid-template-rows: repeat(6, [row] auto); | |
| width: 75%; | |
| margin: auto; | |
| } | |
| p { | |
| line-height: 2; | |
| } | |
| a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| header { | |
| grid-column: col / span 6; | |
| grid-row: row 1; | |
| background: #4bcffa; | |
| padding: 2%; | |
| } | |
| nav { | |
| grid-column: col / span 6; | |
| grid-row: row 2; | |
| background: #485460; | |
| text-align: center; | |
| padding: 1%; | |
| } | |
| nav a { | |
| margin: 3%; | |
| } | |
| nav a:hover { | |
| border-bottom: 3px solid white; | |
| } | |
| main { | |
| grid-column: col / span 4; | |
| grid-row: row 3; | |
| background: white; | |
| } | |
| aside { | |
| grid-column: col 5 / span 2; | |
| grid-row: row 3; | |
| background: #F2F2F2; | |
| } | |
| main, aside { | |
| padding: 3%; | |
| } | |
| footer { | |
| grid-column: col / span 6; | |
| grid-row: row 6; | |
| 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-columns: repeat(6, [col] 1fr); | |
| grid-template-rows: repeat(7, [row] auto); | |
| } | |
| main { | |
| grid-column: col / span 6; | |
| } | |
| aside { | |
| grid-column: col / span 6; | |
| grid-row: row 6; | |
| } | |
| footer { | |
| grid-row: row 7; | |
| } | |
| } | |
| </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