Skip to content

Instantly share code, notes, and snippets.

@adyngom

adyngom/eltonuikit.html

Last active February 13, 2020 09:27
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save adyngom/dadfa4150296546c32897153addd2385 to your computer and use it in GitHub Desktop.
Save adyngom/dadfa4150296546c32897153addd2385 to your computer and use it in GitHub Desktop.
Download ZIP
Code for the CSS Grid Quick Overview Tutorial
Raw
eltonuikit.html
<!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