Как работает grid-auto-flow и auto-размещение элементов?

`grid-auto-flow` определяет, как Grid раскладывает элементы без явной позиции: по строкам или по колонкам и как заполнять пропуски.

Значения

• row (по умолчанию) — заполняет строку за строкой.
• column — заполняет колонку за колонкой, создаёт новые колонки.
• dense — добавляет алгоритм «плотной упаковки»: мелкие элементы забирают пустые ячейки, оставшиеся от крупных.

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 8px;
}

.wide { grid-column: span 2; }
.tall { grid-row: span 2; }

Без dense рядом с крупной ячейкой могут остаться «дыры», с dense они заполняются.

Неявные треки

Если элементов больше, чем явных строк, Grid создаёт неявные. Их размер задают grid-auto-rows и grid-auto-columns:

grid-auto-rows: minmax(100px, auto);

Предупреждение

dense меняет визуальный порядок относительно DOM, что мешает навигации с клавиатуры и экранным чтецам.

Коротко для собеседования

Автоматическое размещение определяется grid-auto-flow. dense убирает дыры, но ломает соответствие порядка в DOM и на экране.