CSS Grid

Что такое CSS Grid

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

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

Единица fr

fr = доля оставшегося пространства. 1fr 2fr → вторая колонка в два раза шире первой.

Адаптивная сетка без media queries

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

Помещается столько колонок минимум по 16rem, сколько влезет; остаток делится поровну. На мобильном — одна колонка, на десктопе — 3 или 4, автоматически.

auto-fit или auto-fill: при малом числе элементов auto-fit растягивает их на всю строку, а auto-fill оставляет пустые колонки.

Размещение детей

.featured { grid-column: span 2; }        /* занимает 2 колонки */
.full     { grid-column: 1 / -1; }        /* от первой линии до последней */
.sidebar  { grid-row: 1 / 3; }            /* две строки */

Линии сетки нумеруются с 1; -1 — последняя.

Именованные области

Для раскладки страниц области читаются лучше всего:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.layout header { grid-area: header; }
.layout aside  { grid-area: sidebar; }

Выравнивание

Виды раскладки на grid — и когда

Коротко

• Grid = строки + колонки, заданные на родителе.
• fr делит оставшееся место; minmax + auto-fit = адаптивность без media queries.
• Flex — для одной оси, grid — для двух.

Официальные источники

• MDN — Grids
• MDN — Basic concepts of grid layout
• Grid Garden (игра)