<div class="container">
  <div class="item item-2"></div>
  <div class="item item-2"></div>
  <div class="item item-1"></div>
  <div class="item item-1"></div>
</div>

<div class="container row-dense">
  <div class="item item-2"></div>
  <div class="item item-2"></div>
  <div class="item item-1"></div>
  <div class="item item-1"></div>
</div>

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  margin-right: 10px;
  background: #eee;
  display: grid;
  
  grid-template-rows: repeat(3, 60px);
  grid-template-columns: repeat(3, 60px);

}

.item {
  background: #fff;
  border-radius: 12px;
  border: 2px solid #222;
}

.item-1 {
  grid-column-end: span 1;
}

.item-2 {
  grid-column-end: span 2;
}

.row-dense {
  grid-auto-flow: row dense;
}