<div class="grid">
<div class="item">
<div class="subgrid-item-pink"></div>
</div>
<div class="item">
<div class="subgrid-item-blue"></div>
<div class="subgrid-item-small"></div>
</div>
<div class="item">
<div class="subgrid-item-small">
</div>
</div>
<div class="item">
<div class="subgrid-item-pink"></div>
</div>
</div>
.grid {
display: grid;
grid-template-columns: minmax(0, 0.5fr) minmax(auto, 20vw) repeat(
2,
minmax(0, 20vw)
) minmax(auto, 10vw) minmax(0, 0.5fr);
grid-auto-rows: minmax(50vh, auto);
}
.item {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
grid-column: span 3;
grid-row: span 2;
.subgrid-item-pink {
background: pink;
}
.subgrid-item-blue {
background: lighten(blue, 25%);
}
&:nth-child(even) {
.subgrid-item-small {
grid-column: 2;
grid-row: 2;
align-self: flex-start;
}
}
&:nth-child(3n) {
background: lighten(red, 45%);
}
}
.subgrid-item-small {
background: lighten(blue, 25%);
padding: 2em;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.