Как выровнять колонки CSS Grid по высоте без пустых пространств

При работе с CSS Grid часто возникает ситуация, когда колонки разной длины, и между ними появляются пустые области. Это портит визуальную структуру макета. В этой статье разберём, как принудительно вытянуть все колонки по самой нижней, используя свойства align-items, align-content и stretch.

Почему возникают пустые пространства в Grid?

По умолчанию элементы сетки (grid items) растягиваются на всю высоту ячейки, если не заданы фиксированные размеры. Однако при использовании align-items: start или align-self на отдельных элементах высота может не совпадать. Также пустоты появляются, когда контент в колонках разный по объёму, а грид не настроен на растяжение.

Основное решение: свойство align-items со значением stretch

Чтобы все колонки стали одинаковой высоты (по самой высокой), добавьте в контейнер грида:

.grid-container { display: grid; align-items: stretch; }

Это значение по умолчанию, но если вы случайно переопределили его, явно укажите stretch. Тогда каждый дочерний элемент займёт всю высоту ячейки.

Дополнительные техники выравнивания

1. Использование align-self для отдельных колонок

Если нужно, чтобы некоторые колонки оставались с собственным контентом, а остальные растягивались, примените:

.grid-item { align-self: stretch; }

Для колонки, которую не нужно растягивать, укажите align-self: start.

2. Свойство align-content для всего контейнера

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

.grid-container { align-content: stretch; }

Это особенно полезно, если высота контейнера больше, чем сумма высот строк.

Пример кода из CodePen

В исходном примере (см. ссылку) колонки с разным содержимым не выравнивались. Добавление align-items: stretch в родительский блок решает проблему. Если после этого пустоты остаются, проверьте, не задана ли дочерним элементам фиксированная высота (height или min-height), которая меньше высоты ячейки.

Распространённые ошибки

• Забыли обнулить margin у дочерних элементов - они могут уменьшать высоту.
• Используете flexbox внутри grid-ячейки - flex-контейнер может не растягиваться, если не задано height: 100%.
• Применяете align-items: baseline - это выравнивает по базовой линии текста, а не по высоте.

Заключение

Чтобы колонки в CSS Grid были вытянуты по самой нижней и не было пустых пространств, достаточно установить align-items: stretch на контейнере. Если это не помогает, проверьте переопределения в дочерних элементах и убедитесь, что высота ячеек не ограничена. Используйте align-content для управления строками при вертикальном переполнении.