Основы grid

grid-template-columns: repeat(3, 1fr) одной строкой создаёт три равных столбца, и браузер помещает каждого потомка в следующую свободную ячейку.

Строки и столбцы сразу

Grid, модуль CSS Grid Layout, создан для двумерной раскладки: строк и столбцов вместе. Ты рисуешь сетку на контейнере, а элементы попадают в её ячейки. Если flexbox начинает с элементов и даёт им самим определить размеры, то grid начинает с раскладки и вписывает в неё элементы. Поэтому он естественно подходит для фотогалерей, списков карточек и общей формы страницы с шапкой, боковой панелью, основным содержимым и подвалом.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Треки и единица fr

grid-template-columns перечисляет ширину каждого столбца, который называется треком. Можно использовать любую длину, например 200px 1fr, но у grid есть своя единица: fr, одна доля свободного места. 1fr 1fr 1fr создаёт три равных столбца; 2fr 1fr делает первый столбец вдвое шире второго. Единица fr делит только место, которое остаётся после фиксированных треков и промежутков, поэтому 200px 1fr даёт боковую панель в 200 пикселей, а основной столбец забирает остальное. repeat(3, 1fr) является более короткой записью 1fr 1fr 1fr. grid-template-rows делает то же для строк, но часто строки не трогают, и их высота подстраивается под содержимое.

Размещаем элементы

По умолчанию элементы заполняют сетку в порядке исходного кода, по одной ячейке, слева направо, а потом на следующей строке. Чтобы сделать элемент больше, grid-column: span 2 растягивает его на два столбца, а grid-row: span 2 на две строки. Линии между треками нумеруются с 1, поэтому у сетки из трёх столбцов есть линии от 1 до 4, а grid-column: 1 / 3 означает от линии 1 до линии 3. grid-column: 1 / -1 растягивает элемент на всю ширину, потому что отрицательные числа отсчитываются с конца.

Именуем области

Для раскладки страницы grid-template-areas позволяет нарисовать её словами. Каждая строка в кавычках является одним рядом, а каждое слово одной ячейкой; если повторить слово, область растянется на эти ячейки. Затем каждому элементу задают grid-area с подходящим именем. Раскладка ниже читается почти как набросок: шапка поверху, боковая панель и основное содержимое рядом, а подвал внизу. Чтобы изменить раскладку для телефона, достаточно переписать эти несколько строк, часто внутри медиазапроса.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Столбцы под размер экрана

Один шаблон из руководств MDN по grid стоит запомнить: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) говорит, что каждый столбец должен быть не меньше 150 пикселей и может расти, деля место, а auto-fill создаёт столько столбцов, сколько помещается. В результате галерея показывает два столбца на телефоне и пять-шесть на широком экране, опять без медиазапроса. Как и flexbox, grid может размещать элементы не в том порядке, что в HTML, и здесь нужна та же осторожность: держи порядок чтения и видимый порядок одинаковыми.