<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 200px;
gap: 20px;
counter-reset: item;
}
.item {
counter-increment: section;
background: red;
padding: 20px;
&::after {
content: counter(section);
}
&:nth-child(2n - 1) {
grid-column: 3 / span 2;
grid-row: span 2;
background: skyBlue;
}
&:nth-child(4n - 1) {
grid-column: 1 / span 2;
grid-row: span 2;
background: blue;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.