Grid: двумерная сетка

CSS Grid — двумерная раскладка: на контейнере описывают строки и столбцы, а дочерние элементы сами встают в ячейки и именованные области.

Строки и столбцы вместе

Flexbox выстраивает элементы в одну линию: ряд или столбец. А макет страницы и сетка карточек состоят из строк и столбцов сразу. Для них есть grid (сетка). Он появился в браузерах позже flexbox, в 2017 году, поэтому для нашей машины времени 2014–2019 это одна эпоха адаптивной вёрстки, и пользоваться мы будем самым современным.

В grid вы описываете сетку на контейнере, а дети сами встают в ячейки:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Три равные колонки с промежутком. Основные слова:

• трек: одна колонка или строка;
• линия: граница между треками (линии нумеруются с единицы);
• ячейка: пересечение строки и столбца;
• область: прямоугольник из нескольких ячеек.

Единица fr и функции

• fr (fraction, доля): доля свободного места. 2fr 1fr даёт две колонки, первая вдвое шире второй;
• repeat(3, 1fr): «три раза по 1fr»;
• minmax(14rem, 1fr): «не уже 14rem, но растяни на свободное место»;
• auto-fit в repeat(): «столько колонок, сколько помещается».

Вместе: repeat(auto-fit, minmax(14rem, 1fr)) даёт сетку, которая сама решает, сколько колонок: на широком экране четыре, на узком одна, и ни одного медиазапроса. Подвигайте ползунок на схеме и посмотрите.

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
  gap: 12px;
}

Обратите внимание на запись minmax(0, 2fr) в макете: у колонки с 1fr есть скрытая беда, она не сжимается меньше своего содержимого, и длинное слово выталкивает колонку за край. minmax(0, …) разрешает ей сжаться.

Макет словами: области

Самый наглядный приём grid: описать макет текстом.

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
}

.page > header { grid-area: header; }
.page > main   { grid-area: main; }

Макет читается как рисунок, в котором слова служат названиями областей. А чтобы перестроить его для телефона, достаточно переписать grid-template-areas (по одному слову в строке), не трогая HTML. Для нашей страницы мы нарисуем только основной блок и боковой.

Предупреждение про порядок. Grid позволяет поставить блок куда угодно независимо от места в HTML, но порядок с клавиатуры и в программе чтения идёт по разметке. Если вид сильно расходится с порядком в HTML, пользователь клавиатуры будет прыгать по странице. Держите порядок в HTML таким, каким его должен читать человек.

Flexbox или grid

Простое правило: один ряд или одна колонка: flexbox, строки и колонки вместе: grid. Меню, шапка, значок с подписью: flexbox. Макет страницы, сетка карточек, галерея: grid. Их можно вкладывать друг в друга: grid для каркаса страницы, flexbox внутри карточки. Если сомневаетесь, спросите себя: важно ли мне, чтобы элементы разных рядов выстраивались в общие колонки? Да: grid.

Практика

Вы продолжаете сайт 2014 года. Раскладка на flexbox работает, но теперь вы замените её на grid. Для макета нужны колонки и области, а для карточек одна строка с auto-fit. Проверка смотрит и на свойства контейнеров, и на то, что у основного блока есть своя область.

Потяните ширину окна: карточки сами меняют число колонок. А потом сравните: сколько строк вы написали для макета на flexbox, и сколько на grid? Что стало понятнее?

Что было не так с 2014 годом

До grid колонки считали руками: «эта колонка 31,5 процента, а эта 65,5, потому что остальное зазор». Фреймворки вроде Bootstrap предлагали готовую сетку из двенадцати колонок и толпу классов col-md-4, и разметка превращалась в слои «обёрток». Сегодня сетка в CSS, а HTML остаётся смысловым.