Динамическое растяжение элемента по всем строкам CSS Grid

Быстрый ответ

Чтобы элемент занял полную ширину или высоту в рамках CSS Grid, примените grid-column: 1 / -1; для ширины и grid-row: 1 / -1; для высоты. Элемент заполнит всё доступное пространство сетки.

.item-fullwidth {
  grid-column: 1 / -1;
}

.item-fullheight {
  grid-row: 1 / -1;
}

Класс .item-fullwidth распространит элемент на все колонки, а .item-fullheight — на все строки.

Объяснение "магии" отрицательных индексов

Отрицательный индекс -1 в CSS Grid ведёт себя необычайно. Применяя grid-column: 1 / -1; или grid-row: 1 / -1;, -1 указывает на последнюю линию сетки. Так что 1 / -1 размещает элемент от первой линии до последней.

Значимость гибкого выравнивания

Гибкость размещения внутри ячеек сетки крайне важна. Её можно управлять с помощью свойств display: flex;, justify-self: и align-self:. Эти инструменты позволяют вам точно выравнять элементы внутри сеточных ячеек.

Визуализация

Представьте сетку CSS как большой бассейн, а элементы — как плавающие матрасы. Выглядит примерно так:

CSS-сетка (Бассейн):
|💧|💧|💧|💧|
|💧|💧|💧|💧|
|💧|💧|💧|💧|

Ваш элемент (Матрас):
|💦💦💦💦|
|💦💦💦💦|
|💦💦💦💦|

Результат:
|💦💦💦💦|
|💦💦💦💦|
|💦💦💦💦|

И соответствующий CSS:

.pool {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Определяем 4 колонки (по своему роду, дорожки в бассейне 🏊) */
}

.mat {
  grid-column: 1 / -1; /* Распространяется на все колонки, как и положено профессионалу */
  grid-row: 1 / -1;    /* И на все строки, почему бы и нет? */
}

Элемент (матрас) охватывает весь бассейн (сетку).

Продвинутое использование, выходящее за пределы базового растягивания

Адаптация к новым элементам сетки

Если в сетке появляется новая строка, комбинация grid-auto-rows: auto; с grid-auto-flow: column; поможет ей гармонично вписаться в общий дизайн, словно это скрытый трек в вашем любимом альбоме.

Подробнее об этом расскажет наш спикер на видео

Ограничение максимальной ширины

Чтобы избегать чрезмерного растяжения элементов, используйте свойство max-width как для отдельных элементов сетки, так и для всего контейнера, задав максимально допустимые размеры.

Заполнение нескольких строк

Если нужно, чтобы элемент занимал больше одной строки, grid-row-end можно установить на значение, достаточно большое, чтобы обеспечить необходимое покрытие. Это как если бы вы использовали особенно длинный плавательный матрас в шикарном вышеупомянутом бассейне!

Полезные материалы

1. CSS Grid Layout Module Level 1 — официальная спецификация W3C, помогающая освоить основы сетки.
2. Полное руководство по CSS Grid — всеобъемлющее руководство, объясняющее, как искусно работать с CSS Grid.
3. CSS Grid Layout — детальное руководство по использованию CSS Grid.
4. Примеры сеток — полезные примеры для практического освоения CSS Grid.
5. Основные принципы сеточной компоновки — доступное введение в базовые принципы сеточной компоновки.
6. Курс по CSS Grid — интерактивный курс обучения работы с CSS Grid.
7. Лучшие практики CSS Grid — советы по оптимизации дизайна с использованием CSS Grid.