Created
September 19, 2018 14:10
-
-
Save litzinger/a39bf214424b51e8f04f19c92397655a to your computer and use it in GitHub Desktop.
Simple CSS Grid layout without a framework
This file contains 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
| .container { | |
| padding: 0 1rem; | |
| margin: 0 auto; | |
| } | |
| @media screen and (min-width: 992px) { | |
| .container { | |
| max-width: 1140px; | |
| } | |
| .grid-wrapper { | |
| display: grid; | |
| grid-gap: 0 2rem; | |
| grid-template-columns: repeat(12, 1fr); | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| .col-1 { grid-column: span 1; } | |
| .col-2 { grid-column: span 2; } | |
| .col-3 { grid-column: span 3; } | |
| .col-4 { grid-column: span 4; } | |
| .col-5 { grid-column: span 5; } | |
| .col-6 { grid-column: span 6; } | |
| .col-7 { grid-column: span 7; } | |
| .col-8 { grid-column: span 8; } | |
| .col-9 { grid-column: span 9; } | |
| .col-10 { grid-column: span 10; } | |
| .col-11 { grid-column: span 11; } | |
| .col-12 { grid-column: span 12; } | |
| } |
This file contains 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>My Website</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="grid-wrapper"> | |
| <div class="col-4"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p> | |
| </div> | |
| <div class="col-4"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p> | |
| </div> | |
| <div class="col-4"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment