Полностью адаптивные элементы с сеткой CSS и автоматической регулировкой minmax. ⇐ CSS

[Anonymous]

Использование Grid-template-columns: повтор(auto-fit, minmax(600px, 1fr)) упрощает создание адаптивной CSS-сетки. Контейнер будет заполнен таким количеством элементов, которое помещается в строку, без использования медиа-запроса.

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

.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.item {
height: 100px;
background: #ccc;
}

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

Проблема в том, что элементы шире экрана когда экран меньше минимального значения, указанного в minmax(). Вы можете исправить это, добавив медиа-запрос размером 400 пикселей, но это работает только в том случае, если вы знаете, что вокруг контейнера нет контента. А это почти невозможно, когда контейнер можно разместить где угодно.

Есть ли способ или свойство сообщить элементам, что они никогда не должны быть шире, чем 100%?

Что-то вроде: заполните контейнер как можно большим количеством элементов размером 400 пикселей, но убедитесь, что ни один из них не становится шире, чем 100% ширины контейнера. .

Демо-версия CodePen

Подробнее здесь: https://stackoverflow.com/questions/479 ... fit-minmax