Автоматический перенос элементов в CSS grid как при float или inline-block

Question

Подскажите пожалуйста, как реализовать на гриде следующее поведение, бывшее элементарным без грида.

Есть родительский блок с display: grid. Мы не знаем, сколько в нём будет дочерних элементов, сколько столбцов и рядов.

Далее в него добавляются элементы шириной и высотой 100px. Их ширина не тянется, а остаётся 100px. То есть элементы сами заведуют своей шириной. Они располагаются горизонтально друг за другом. При достижении правого края, если элемент не влезает в оставшееся пустое место контентной области родителя, он должен расположиться на новом горизонтальном ряду. Как это было раньше при вёрстке на флоатах.

При этом если родитель меняется по ширине, или если сами элементы изменились по ширине, то элементы должны просто перестроиться, с той же логикой переносов на новые строки.

Например grid-template-columns: repeat( auto-fill, 100px ) весьма хорош, но при этом не выполняется "элементы сами заведуют своей шириной".

Вот диаграмма с ожидаемым поведением:

Answer 1

Разве не оно?

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: 100px 100px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: stretch;
}

.container>div {
  width: 100px;
  height: 100px;
  border: 1px dashed gray;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Или ширина дочерних элементов может быть разной? В этом дело?

БЛОГ НА HUSL

Автоматический перенос элементов в CSS grid как при float или inline-block

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