<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.