<html>
<body>
<div class="container">
<div class="normal">
1
</div>
<div class="vertical">
2
</div>
<div class="horizontal">
3
</div>
<div class="normal">
4
</div>
<div class="normal">
5
</div>
<div class="big">
6
</div>
<div class="normal">
7
</div>
<div class="vertical">
8
</div>
<div class="horizontal">
9
</div>
<div class="normal">
10
</div>
<div class="normal">
11
</div>
</div>
</div>
</body>
</html>
$darkblue: #00695C;
$blue:#009688;
$lightblue: #4DB6AC;
$teal: #80CBC4;
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 150px;
grid-auto-flow: dense;
}
.horizontal {
background: $darkblue;
grid-column: span 2;
}
.vertical {
background: $blue;
grid-row: span 2;
}
.big {
background: $lightblue;
grid-column: span 2;
grid-row: span 2;
}
.normal {
background: $teal;
}
/* other stuff */
.container > div{
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: white;
font-family: helvetica;
}
html, body {
background-color: white;
margin: 10px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.