Initial grid styles added to demo from CSS Grid Layout: A Quick Start Guide. Fork and follow along!
kazz54
/ index.html
Created
September 1, 2021 12:45
Rapid Prototyping with CSS Grid - a Basic Template
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> | |
| <div class="grid-container"> | |
| <nav> | |
| <ul class="grid-nav-main"> | |
| <li><a href="">Home</a></li> | |
| <li><a href="">Products</a></li> | |
| <li><a href="">Features</a></li> | |
| <li><a href="">About</a></li> | |
| <li><a href="">Find us</a></li> | |
| <li><a href="">Contact</a></li> |
kazz54
/ css-grid-layout-a-quick-start-guide-ii.markdown
Created
September 1, 2021 09:24
CSS Grid Layout: A Quick Start Guide ii
kazz54
/ css-grid-layout-define-the-12-column-grid.markdown
Created
September 1, 2021 08:28
CSS Grid Layout. Define the 12 column grid
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
| <div class="container"> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <main><h2>A Demo Site showcasing CSS Grid</h2> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque pariatur possimus alias quod ratione incidunt dicta assumenda repudiandae optio eveniet, quisquam fuga! Nam eaque fuga similique quia, esse non libero?</p> |
NewerOlder