<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"left top top"
"left main hi";
}
.item {
height: 100px;
background-color: #f1e4e4;
border: 1px solid #777777;
}
.item:first-child {
grid-column-start: 2;
grid-column-end: 4;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.