- Теория
- Теория
Свойство grid-auto-flow
Мы сделали так, чтобы карточка с классом huge занимала два ряда и две колонки. Из-за этого в первом ряду образовалась пустая ячейка. Так произошло потому, что в ряду осталось место только для одной колонки, а следующая карточка занимает две. В результате карточка перенеслась на новый ряд, а предыдущий ряд остался незаполненным.
Такое поведение можно изменить с помощью свойства grid-auto-flow. Оно управляет автозаполнением грид-контейнера.
.grid-container {
display: grid;
grid-auto-flow: row;
}Значение по умолчанию row говорит располагать элементы в том порядке, в котором они идут в разметке, и при необходимости создавать новые ряды:
Но если указать значение dense, то контейнер будет заполняться так, чтобы не было пропусков:
Значение dense заставляет грид-контейнер заполнять пустые ячейки первым подходящим по размеру грид-элементом. При этом визуальный порядок на странице может отличаться от порядка элементов в разметке. Если порядок элементов важен, лучше это значение не использовать.
В нашем списке порядок карточек не имеет значения, но желательно заполнять ряды полностью. Чтобы этого добиться, добавим списку карточек свойство grid-auto-flow со значением dense. Затем изменим ширину страницы и понаблюдаем, как элементы меняются местами.
Наконец, уберём у <body> фиксированную ширину. Будем изменять ширину окна мини-браузера и посмотрим, как меняются размеры колонок и перестраивается список карточек.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
