Grid layout - subgrid
HTML
<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three</div>
</div>
CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 80px 80px 80px;
}
.grid div { height: 100%; outline: 1px dotted black; }
.one {
background-color: red;
grid-column: 1 / 3;
grid-row: 1;
}
.two {
background-color: yellow;
display: grid;
grid-column: 1 / 5;
grid-row: 1 / 3;
grid: subgrid;
}
.tre {
background-color: green;
grid-column: 2 / span 3;
grid-row: 3;
}