<section class="grid">

  <div class="grid-element-1 bg-blue">1</div>

  <div class="grid-element-2 bg-red">2</div>

  <div class="grid-element-3 bg-green">3</div>

  <div class="grid-element-4 bg-purple">4</div>

  <div class="grid-element-5 bg-dark">Long text content in 2 columns. Two columns - the maximum width</div>

</section>

.grid {

  position: relative;

​

  display: grid;

  grid-auto-rows: 50px;

  grid-auto-columns: 50px;

  grid-gap: 20px;

  grid-template-columns: 50px 40px 200px;

​

  font-family: sans-serif;

}

​

.grid div {

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  height: 50px;

  padding: 10px;

​

  color: #fff;

}

​

.bg-blue {

  background: #64b5f6;

}

​

.bg-red {

  background: #e57373;

}

​

.bg-green {

  background: #81c784;

}

​

.bg-purple {

  background: #ec407a;

}

​

.bg-dark {

  background: #000047;

}

​

.grid-element-2 {

  position: absolute;

​

  grid-row: 3;

  grid-column: 3 / 7;

}

​

.grid-element-4 {

  grid-row: 4;

  grid-column: 7;

}

​

.grid-element-5 {

  position: absolute;

​

  grid-row: 2;

  grid-column: 3 / 5;

}

​