• Теория
  • Теория

Свойство grid-auto-flow

Мы сделали так, чтобы карточка с классом huge занимала два ряда и две колонки. Из-за этого в первом ряду образовалась пустая ячейка. Так произошло потому, что в ряду осталось место только для одной колонки, а следующая карточка занимает две. В результате карточка перенеслась на новый ряд, а предыдущий ряд остался незаполненным.

Такое поведение можно изменить с помощью свойства grid-auto-flow. Оно управляет автозаполнением грид-контейнера.

.grid-container {
  display: grid;
  grid-auto-flow: row;
}

Значение по умолчанию row говорит располагать элементы в том порядке, в котором они идут в разметке, и при необходимости создавать новые ряды:

1
2
3. Карточка, занимающая две колонки.
4
5

Но если указать значение dense, то контейнер будет заполняться так, чтобы не было пропусков:

1
2
3. Карточка, занимающая две колонки.
4
5

Значение dense заставляет грид-контейнер заполнять пустые ячейки первым подходящим по размеру грид-элементом. При этом визуальный порядок на странице может отличаться от порядка элементов в разметке. Если порядок элементов важен, лучше это значение не использовать.

В нашем списке порядок карточек не имеет значения, но желательно заполнять ряды полностью. Чтобы этого добиться, добавим списку карточек свойство grid-auto-flow со значением dense. Затем изменим ширину страницы и понаблюдаем, как элементы меняются местами.

Наконец, уберём у <body> фиксированную ширину. Будем изменять ширину окна мини-браузера и посмотрим, как меняются размеры колонок и перестраивается список карточек.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 27 мая 2024. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Начало» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.