<div class="layout">
<div class="child">
<span></span>
<span></span>
<span></span>
</div>
<div class="child">
<span></span>
<span></span>
<span></span>
</div>
<div class="child last-row">
<span></span>
<span></span>
<span></span>
</div>
</div>
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8px;
}
.child {
background: orange;
text-align: center;
padding: 25px;
display: flex;
justify-content: space-between;
}
.last-row {
grid-column: 1 / 3;
}
.child > span {
height: 50px;
background: darkred;
flex: 0 1 30%;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.