How to create css grid with different count of items in different rows

Question

I'm trying to create responsive grid with CSS, which will have three items in the first row and two in second. Here's the design

How can I achieve this result?

Answer 1

I'm by no means a CSS expert, but heres my attempt at doing it:

.item1 { grid-area: one; }
.item2 { grid-area: two; }
.item3 { grid-area: three; }
.item4 { grid-area: four; }
.item5 { grid-area: five; }
.space1 { grid-area: spaceleft; }
.space2 { grid-area: spaceright; }

.grid-container {
  display: grid;
  grid-template-areas:
    'one one two two three three'
    'spaceleft four four five five spaceright';
  gap: 10px;
  padding: 10px;
}

.grid > div {
  text-align: center;
}

<div class="grid">
  <div class="item1"><img src="https://placehold.jp/400x400.png"></div>  
  <div class="item2"><img src="https://placehold.jp/400x400.png"></div>
  <div class="item3"><img src="https://placehold.jp/400x400.png"></div>
  <div class="space1"></div>
  <div class="item4"><img src="https://placehold.jp/400x400.png"></div>
  <div class="item5"><img src="https://placehold.jp/400x400.png"></div>
  <div class="space2"></div>
</div>

It looks like this

There's probably a thousand different ways to do this, but this is one way. I hope you get some other responses as well.