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