<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
.container {
  display: grid;
  grid-template-columns: 150px 100px;
  grid-template-rows: 100px 100px;
}



















.item1,.item2,.item3,.item4 {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1{
  background-color : pink;
}
.item2{
  background-color : lemonchiffon;
}
.item3{
  background-color : PaleTurquoise;
}
.item4{
  background-color : PaleGreen;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.