Take half width in 3 columns CSS grid layout

Question

Can we create a layout like in below image by CSS grid?

Answer 1

You can create a 6 columns grid, and set grid-column: auto / span 3; for the first two elements and auto / span 2 for the rest of them:

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 16px;
  grid-auto-rows: 32px;
}

.grid span {
  background-color: steelblue;
  grid-column: auto / span 2;
}

.grid span:nth-child(1),
.grid span:nth-child(2) {
  grid-column: auto / span 3;
}

<div class="grid">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>