A quick warning and request
One of my friend told me that he learned a lot from the video even though it was a bit long - 25mn is kinda long. If you speed it up to 1.5x it is still watchable but at 2x I start to sound like a total chipmunk and you might find it entertaining.
I hope you enjoy it and learn something from it if CSS Grid is new to you. I really miss working on the User Interface side, let me know in the comments if you would like to see more posts around UI
In this tutorial we’ll take quick look at the power offered by the CSS grid system. It’s almost time to get rid of all the framework code you’ve grown so used to once you see the potential of the CSS grid.
The starter coded is added inline or you can copy it from here:
Grid starter code
And the template used can be downloaded here:
Elton UI Kit
<!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>
Nice job!