<div class="container">
<div class="item a">Item 1</div>
<div class="item b">Item 2</div>
<div class="item c">Item 3</div>
<div class="item d">Item 4</div>
</div>
.container{
display:grid;
grid-template-columns:2;
grid-template-rows:2;
grid-row-gap:10px;
}
.item {
border: 1px solid #000;
width : 50px;
height : 50px;
}
.a{
grid-row:1;
grid-column:1;
}
.b{
grid-row:1;
grid-column:2;
}
.c{
grid-row:2;
grid-column:1;
}
.d{
grid-row:2;
grid-column:2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.