Подскажите пожалуйста, как реализовать на гриде следующее поведение, бывшее элементарным без грида.
Есть родительский блок с display: grid
. Мы не знаем, сколько в нём будет дочерних элементов, сколько столбцов и рядов.
Далее в него добавляются элементы шириной и высотой 100px. Их ширина не тянется, а остаётся 100px. То есть элементы сами заведуют своей шириной. Они располагаются горизонтально друг за другом. При достижении правого края, если элемент не влезает в оставшееся пустое место контентной области родителя, он должен расположиться на новом горизонтальном ряду. Как это было раньше при вёрстке на флоатах.
При этом если родитель меняется по ширине, или если сами элементы изменились по ширине, то элементы должны просто перестроиться, с той же логикой переносов на новые строки.
Например grid-template-columns: repeat( auto-fill, 100px )
весьма хорош, но при этом не выполняется "элементы сами заведуют своей шириной".