CSS Grid — сетка для вёрстки страниц

CSS Grid — двумерная система раскладки. В отличие от Flexbox (одна ось), Grid управляет одновременно строками и колонками. Идеален для сеток карточек, страниц с сайдбаром, галерей и любой структуры, где нужен контроль над двумя осями.

Основы CSS Grid — display: grid

Чтобы создать grid-контейнер — добавь display: grid. Дочерние элементы автоматически становятся grid-элементами. Затем задаёшь колонки и строки.

.container {
  display: grid;

  /* 3 колонки равной ширины */
  grid-template-columns: 1fr 1fr 1fr;

  /* Строки: первая 60px, вторая auto, третья 40px */
  grid-template-rows: 60px auto 40px;

  /* Отступ между ячейками */
  gap: 20px;

  /* Или раздельно: row-gap и column-gap */
  row-gap: 16px;
  column-gap: 24px;
}

Единица fr — доля свободного пространства

fr (fraction) — дробная единица. Разделяет доступное пространство пропорционально. 1fr 1fr 1fr — три равные колонки. 1fr 2fr — вторая в два раза шире первой.

/* 3 равные колонки */
grid-template-columns: 1fr 1fr 1fr;
/* Или короче: */
grid-template-columns: repeat(3, 1fr);

/* Фиксированный сайдбар + растягивающийся контент */
grid-template-columns: 280px 1fr;

/* Два сайдбара + контент */
grid-template-columns: 200px 1fr 200px;

/* 12-колоночная сетка (как Bootstrap) */
grid-template-columns: repeat(12, 1fr);

/* Строки тоже можно задавать в fr */
grid-template-rows: auto 1fr auto;  /* header + main (растягивается) + footer */

repeat(), minmax() — адаптивные колонки

repeat() сокращает запись повторяющихся колонок. minmax() задаёт диапазон: минимальный и максимальный размер. Вместе с auto-fill — адаптивная сетка без медиазапросов.

/* repeat(количество, размер) */
grid-template-columns: repeat(4, 1fr);
/* = 1fr 1fr 1fr 1fr */

/* minmax(мин, макс) */
grid-template-columns: minmax(200px, 1fr) minmax(200px, 3fr);

/* ✨ Адаптивная сетка БЕЗ медиазапросов */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
/* Браузер сам решает сколько колонок влезет */
/* При ширине 900px = 3 колонки по 280px */
/* При ширине 600px = 2 колонки */
/* При ширине 300px = 1 колонка */

/* auto-fill vs auto-fit: */
/* auto-fill: создаёт пустые колонки чтобы заполнить ширину */
/* auto-fit: схлопывает пустые колонки, растягивает заполненные */
.stretchy {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Размещение элементов — grid-column и grid-row

По умолчанию каждый элемент занимает одну ячейку. С помощью grid-column и grid-row элемент можно растянуть на несколько колонок или строк.

/* grid-column: начало / конец (линии сетки) */
.header {
  grid-column: 1 / 4;   /* от линии 1 до линии 4 = 3 колонки */
  grid-column: 1 / -1;  /* от первой до последней (любое количество) */
}

/* Занять N колонок от текущей позиции */
.wide-card {
  grid-column: span 2;  /* занять 2 колонки */
  grid-row: span 2;     /* занять 2 строки */
}

/* Пример сетки с блоками разного размера */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

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

.item-wide {
  grid-column: span 4;  /* на всю ширину */
}

/* Точное размещение */
.specific {
  grid-column: 2 / 4;  /* колонки 2-3 */
  grid-row: 1 / 3;     /* строки 1-2 */
}

grid-template-areas — именованные области

Самый читаемый способ верстать страницу — задать именованные области. Визуально видно как будет выглядеть макет прямо в CSS.

/* Классический макет: header, sidebar, main, footer */
.page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr 56px;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

/* Назначаем элементы в области */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Пропуск ячейки — точка */
.layout-no-sidebar {
  grid-template-areas:
    "header"
    "main  "
    "footer";
}

/* Адаптивный вариант */
@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "main  "
      "sidebar"
      "footer";
  }
}

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

/* Выравнивание ВСЕХ элементов внутри ячеек */
.grid {
  /* По горизонтали внутри ячейки */
  justify-items: start | center | end | stretch; /* stretch по умолчанию */

  /* По вертикали внутри ячейки */
  align-items: start | center | end | stretch;

  /* Выравнивание ВСЕЙ СЕТКИ в контейнере */
  justify-content: start | center | end | space-between | space-around;
  align-content: start | center | end | space-between;
}

/* Выравнивание ОДНОГО элемента */
.item {
  justify-self: start | center | end | stretch;
  align-self: start | center | end | stretch;
}

/* Центрировать что угодно в grid */
.grid {
  display: grid;
  place-items: center;  /* = align-items + justify-items в одном */
  min-height: 100vh;
}

Практические примеры CSS Grid

/* 1. Сетка карточек блога */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* 2. Галерея с крупными элементами */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;  /* высота строк */
  gap: 8px;
}

.gallery-item:first-child {
  grid-column: span 2;  /* первое фото занимает 2 колонки */
  grid-row: span 2;     /* и 2 строки */
}

/* 3. Полный макет страницы */
.app-layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "nav  header  header"
    "nav  main    aside ";
  height: 100vh;
}

/* 4. Карточка с изображением */
.media-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: start;
}

/* 5. Форма */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full-width {
  grid-column: span 2;  /* поле на всю ширину */
}

CSS Grid vs Flexbox — когда что выбирать

На практике используют оба: Grid для структуры страницы, Flexbox для выравнивания внутри компонентов.

Часто задаваемые вопросы о CSS Grid

Как занять несколько колонок в CSS Grid?

Используй grid-column: span N на элементе — он займёт N колонок от своей позиции. Или точно укажи границы: grid-column: 1 / 4 — от линии 1 до линии 4 (три колонки). Для растяжения на всю ширину: grid-column: 1 / -1 — от первой до последней линии независимо от количества колонок.

Как сделать адаптивную сетку без медиазапросов?

Используй repeat(auto-fill, minmax(минимальная-ширина, 1fr)). Браузер сам считает сколько колонок влезает. Минимальная ширина — это наименьший разумный размер карточки. Например, minmax(280px, 1fr) — при экране 900px будет 3 колонки, при 500px — 1. Никаких медиазапросов не нужно.

CSS Grid vs Flexbox — что выбрать?

Простое правило: если контент в одну линию (строку или колонку) — Flexbox. Если нужна сетка из строк и колонок — Grid. Flexbox — для компонентов (кнопки, навбар, элементы карточки). Grid — для раскладки блоков на странице (галерея, колонки, макет). В реальных проектах используют оба вместе: Grid для структуры, Flex для содержимого блоков.