🔲 Полное руководство по CSS Grid

CSS Grid Layout — это двумерная система раскладки, которая позволяет создавать сложные макеты с контролем над колонками и строками одновременно.

Основные концепции

• Grid-контейнер — родительский элемент с display: grid
• Grid-элементы — дочерние элементы контейнера
• Grid-линии — линии, разделяющие строки и колонки
• Grid-треки — строки или колонки между двумя линиями
• Grid-ячейки — наименьшая единица сетки
• Grid-области — прямоугольные области, охватывающие несколько ячеек

Чтобы начать использовать Grid, нужно применить display: grid или display: inline-grid к родительскому элементу.

Пример

Простая сетка 3×3:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px 100px;
  gap: 10px;
}

Эти свойства определяют размеры колонок и строк сетки.

Единицы измерения

• px — фиксированный размер
• % — процент от контейнера
• em/rem — относительно размера шрифта
• fr — доля свободного пространства (fraction)
• auto — автоматический размер
• minmax(min, max) — диапазон размеров

Примеры

/* Три равные колонки */
grid-template-columns: 1fr 1fr 1fr;

/* Сокращённая запись */
grid-template-columns: repeat(3, 1fr);

/* Фиксированная + гибкие */
grid-template-columns: 200px 1fr 1fr;

/* С использованием minmax */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Функция repeat() позволяет сократить запись повторяющихся треков.

Синтаксис

repeat(количество, размер)

Примеры

/* 3 колонки по 1fr */
grid-template-columns: repeat(3, 1fr);

/* Альтернативный паттерн */
grid-template-columns: repeat(2, 100px 1fr);

/* auto-fit — автоматическое заполнение */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* auto-fill — заполняет пустое пространство */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

auto-fit vs auto-fill

• auto-fit — сжимает пустые треки до 0
• auto-fill — сохраняет пустые треки

Свойство gap устанавливает отступы между строками и колонками.

Синтаксис

gap: <row-gap> <column-gap>;
gap: 20px;              /* одинаковые отступы */
gap: 20px 10px;         /* row-gap column-gap */
row-gap: 20px;          /* только между строками */
column-gap: 10px;       /* только между колонками */

Эти свойства управляют размещением элементов в сетке.

Синтаксис

grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;

/* Или сокращённо */
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

Примеры

/* Элемент занимает колонки 1-3 */
.item {
  grid-column: 1 / 4;
}

/* Элемент занимает 2 колонки */
.item {
  grid-column: span 2;
}

/* Полная запись */
.item {
  grid-area: 1 / 1 / 3 / 4;
}

Свойство grid-template-areas позволяет создавать макеты с помощью именованных областей.

Синтаксис

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 100px 1fr 50px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Пустые ячейки

Используйте точку . для пустых ячеек:

grid-template-areas:
  "header header header"
  ". main .";

Эти свойства выравнивают содержимое внутри ячеек сетки.

justify-items (горизонтальное выравнивание)

• start — по левому краю
• end — по правому краю
• center — по центру
• stretch — растянуть (по умолчанию)

align-items (вертикальное выравнивание)

• start — по верху
• end — по низу
• center — по центру
• stretch — растянуть (по умолчанию)

Сокращённая запись

place-items: center;  /* align-items + justify-items */

Эти свойства выравнивают всю сетку внутри контейнера, если есть свободное пространство.

justify-content (горизонтальное выравнивание сетки)

• start — по левому краю
• end — по правому краю
• center — по центру
• stretch — растянуть треки
• space-around — равные промежутки
• space-between — промежутки между
• space-evenly — абсолютно равные промежутки

align-content (вертикальное выравнивание сетки)

Аналогичные значения для вертикали.

Сокращённая запись

place-content: center;  /* align-content + justify-content */

Рассмотрим несколько практических примеров использования CSS Grid.

Адаптивная сетка карточек

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

Макет страницы

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Центрирование элемента

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}