grid-auto-flow: направление автоматического размещения
grid-auto-flow управляет алгоритмом автоматического размещения элементов, которым не задали точную позицию в сетке.
Назначение
grid-auto-flow управляет алгоритмом автоматического размещения элементов, которым не задали точную позицию в сетке.
Как это работает
row размещает по строкам, column — по колонкам. Дополнение dense разрешает заполнять более ранние свободные места подходящими элементами, что может изменить визуальный порядок.
Пример
<style>
.grid{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}.grid>div{padding:12px;background:#eaf4ee}
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div></div>Что должно получиться
Сначала заполняются две строки первой колонки, затем второй. Номера позволяют увидеть отличие от привычного размещения слева направо по строкам.
Граница применения и частая ошибка
Не включайте dense в смысловую последовательность только ради отсутствия дыр. Порядок фокуса и чтения может остаться исходным и перестать совпадать с видимым.
Самостоятельная проверка
Сравните row и column при явных двух строках. Пронумеруйте элементы по HTML и проследите, как меняется путь визуального чтения.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.