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

Question

freeman0204 @freeman0204

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

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

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

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

Вопрос задан более двух лет назад
79 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Answer 1 · 2022-10-14 13:00:01

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

<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;
}

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

Войдите на сайт