⁣align-content: normal — неочевидная ловушка в Grid и Flexbox

Поведение align-content: normal радикально отличается во Flexbox и Grid, что приводит к неожиданным разрывам макетов в production-проектах: от лендингов до дизайн-систем. Частая ошибка — полагаться на умолчания, не проверяя контекст.

Flexbox: normal = stretch, но только для многострочных
В многострочных Flexbox-контейнерах (flex-wrap: wrap) normal ведет себя как stretch — строки занимают всю высоту. Это удобно, но ломает сценарии, где нужен компактный вертикальный ритм. Всегда явно задавайте align-content, если макет требует иного:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
}

Grid: normal = start, и это правильно для адаптива
В Grid normal эквивалентно start — треки прижимаются к верху, пустота уходит вниз. Это снижает риск «растянутого» контента при динамической высоте. Ошибка: ожидание stretch приводит к перекосу макета:

.grid {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  height: 100vh;
}

Так строки не растягиваются, а пустота остается внизу — стабильно для контента разной длины.

Практические советы и предостережения
- В production всегда переопределяйте align-content явно: stretch или start. Это предотвращает «плавающие» компоненты.
- Не путайте align-content (выравнивание всех строк) с align-self (конкретная ячейка). Типичная ошибка: пытаться исправить позицию одного элемента через align-content.
- Для адаптивных сеток с изменяемой высотой контейнера используйте align-content: start в Grid, чтобы избежать лишних вертикальных отступов при скролле.

Вывод: Явное указание align-content — база стабильной верстки, избавляющая от сюрпризов при смене контекста между Flexbox и Grid в production.