Минимальный размер дорожки CSS-сетки при просмотре содержимого ⇐ CSS

[Anonymous]

У меня есть несколько HTML-элементов с минимальным размером 200 пикселей.

Я хочу создать сетку из этих элементов, чтобы в каждой строке было не более 5.

/>Если в строке недостаточно места для 5 элементов, я хочу, чтобы элементы переместились в новую строку.

Этого можно добиться с помощью следующего кода.

Код: Выделить всё

Код: Выделить всё

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 20%));
}

.grid_item {
border: solid black 1px;
width: 200px;
height: 200px;
}

Однако я не хочу, чтобы мне также приходилось указывать минимальный размер дорожки 200 пикселей в сетке.

Я хочу, чтобы это было так каков минимальный размер содержащихся элементов.
Поэтому я попытался заменить 200 пикселей на auto (и минимальное содержимое тоже), но ни один из них не кажется, работает правильно.

В результате, когда недостаточно места для 5 элементов, вместо перемещения элементов в новую строку все равно сохраняется 5 элементов в строке и добавляется горизонтальная прокрутка. bar.

Код: Выделить всё

grid-template-columns: repeat(auto-fill, minmax(auto, 20%));

Есть ли способ добиться этого?


Подробнее здесь: https://stackoverflow.com/questions/785 ... at-content