Как сверстать GRID сетку с блоками разного размера

Question

Есть grid/flex разметка с блоками разной величины внутри:

При смене рразмера экрана до мобильного, все блоки будут друг под другом. Это тоже можно сделать используя grid-template-column: repeat(auto-fit/auto-fill, minmax()). Я знаю как можно сверстать такое через grid и :nth-child(), отдельно выдав каждому элементу grid-column/grid-row, но можно ли как-то иначе сделать такую разметку? Как сделать респонс верстку с автопереносом блоков и "ломанной" сеткой?

Answer 1

Говорю сразу, с grid-ами такого не выйдет, но можно вот так реализовать или делать через flex:

.gallery {
    column-count: 2;
    gap: 10px;
    padding: 10px 0;
    width: 100%;
}

Answer 2

если все дочерние блоки можно разбить на несколько групп, каждая из которых имеет заранее известную высоту, то проще пареной репы:

#x{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1.5em;
  grid-gap: .5em;
}

#x > *{
  background: pink;
  border: 3px solid red;
  display: list-item;
  list-style: decimal inside;
  grid-row: span 2;
  border-radius: .5em;
}

#x > :nth-child(5n-3){
  background: cyan;
  border-color: blue;
  grid-row: span 4;
}

#x > :nth-child(3n){
  background: lime;
  border-color: green;
  grid-row: span 3;
}

<div id='x'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

если же блоки должны растягиваться непредсказуемо(в зависимости от содержимого)

можно глянуть на третий сниппет в этом ответе

БЛОГ НА HUSL

Как сверстать GRID сетку с блоками разного размера

Ответы (2 шт):