Как сделать такую расстановку блоков на grid?

Question

[freeman0204]

Вот что нужно сделать:

Вот как я делал нужную расстановку блоков на grid через grid-template-areas.

Сейчас мне нужно сделать блок где идет сначала 2 фото в ряд, потом одна две, одна ит.д. Суть в том что в фотографиях один родитель и в нем просто img, как без задания родителя дополнительного img поставить так блоки? И фото может быть много, и если делать через grid-template-areas мне придется их докопировать? Или можно как то более универстальней сделать?

Answer 1

[Froggyweb]

https://codepen.io/froggyweb/pen/dyeaxoe

Answer 2

[Сергей delphinpro]

Да это же самое простое. Я по заголовку вопроса думал тут реально интересная раскладка =((

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.item:nth-child(3n + 3) {
  grid-column: span 2;
}