Сценарий
У нас есть определение сетки, и мы хотим сделать его отзывчивым без использования медиа-запросов.
.grid {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(4, minmax(100px, 1fr));
grid-gap: 20px;
}
Это начальная демонстрация.
Мы меняем размер области просмотра, мы видим, что элементы сетки переполняют контейнер по горизонтали, так как минимальная ширина каждого элемента равна 100px. Максимальная ширина для каждого элемента равна 1fr, поэтому каждый элемент будет увеличиваться, чтобы занимать дополнительное место, когда мы делаем окно просмотра шире.
Подход
Измените определение grid-template-columns, заменив 4 ключевым словом auto-fit.
.grid {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 20px;
}
Мы можем видеть, что когда пространство окна просмотра позволяет это, каждый элемент будет занимать выделенное пространство. Когда мы уменьшаем область просмотра, элементы переносятся на следующую строку.
