Code for the CSS Grid Quick Overview Tutorial
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Elton ui Kit</title> | |
| <style> | |
| @import 'https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400'; | |
| html { | |
| background-color: #eee; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| counter-reset: section; | |
| } | |
| .wrapper { | |
| width: 1170px; | |
| margin: 30px auto; | |
| box-sizing: border-box; | |
| } | |
| .box { | |
| border-radius: 3px; | |
| background-color: #ffffff; | |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06); | |
| } | |
| .hero-fashion > .box { | |
| width: 1170px; | |
| height: 505px; | |
| margin-bottom: 30px; | |
| } | |
| .row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr 1fr; | |
| grid-auto-rows: 238px; | |
| grid-gap: 30px; | |
| } | |
| .tall-span { | |
| grid-row: span 2; | |
| } | |
| .wide-span { | |
| grid-column: span 2 | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <!-- hero section --> | |
| <div class="hero-fashion"> | |
| <div class="box"></div> | |
| </div> | |
| <!-- grid section --> | |
| <div class="row"> | |
| <div class="box tall-span"></div> | |
| <div class="box wide-span"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box wide-span"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| <div class="box"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment