Вёрстка сайта с использованием CSS Grid Layout

Вёрстка сайта с использованием CSS Grid Layout

CSS Grid — двумерная система раскладки, которая кардинально изменила подход к сложным макетам. Там где раньше требовались абсолютное позиционирование, JavaScript-плагины или Bootstrap-сетки из 12 колонок, теперь достаточно нескольких строк CSS.

Когда Grid, когда Flexbox

Простое правило: Grid — для двумерных раскладок (строки И столбцы одновременно), Flexbox — для одномерных (строки ИЛИ столбцы).

• Основной макет страницы (header / sidebar / main / footer) — Grid
• Галерея карточек — Grid
• Навигационный список — Flexbox
• Кнопка с иконкой и текстом — Flexbox
• Форма с полями — оба варианта в зависимости от сложности

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

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

.layout__header  { grid-area: header;  }
.layout__sidebar { grid-area: sidebar; }
.layout__main    { grid-area: main;    }
.layout__footer  { grid-area: footer;  }

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

grid-template-areas — визуальная запись раскладки прямо в CSS. При изменении медиазапроса достаточно перестроить grid-template-areas, не трогая дочерние элементы.

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

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

auto-fill + minmax(280px, 1fr) — сетка сама решает сколько колонок поместится. На мобильных — 1 колонка, на планшете — 2–3, на десктопе — 4+. Ни одного медиазапроса.

Разница auto-fill vs auto-fit:

• auto-fill — создаёт пустые треки если элементов меньше чем колонок
• auto-fit — пустые треки сжимаются до нуля, элементы растягиваются

Для галереи с фиксированным размером карточек — auto-fill. Для списка с растягивающимися элементами — auto-fit.

Плотная упаковка (masonry-like)

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px; /* Маленький шаг */
  gap: 16px;
}

.gallery__item--tall  { grid-row: span 20; }
.gallery__item--short { grid-row: span 12; }

Или CSS-only masonry (Firefox 126+, Chrome с флагом):

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 16px;
}

Пока не везде поддерживается — для продакшена нужен полифил (JavaScript-based masonry) как fallback.

Выравнивание элементов

.hero {
  display: grid;
  place-items: center; /* justify-items + align-items: center одной строкой */
  min-height: 100vh;
}

/* Конкретный элемент — вытолкнуть вправо */
.nav__cta {
  margin-inline-start: auto; /* или: justify-self: end в grid-контексте */
}

Overlapping — перекрытие элементов

Grid позволяет наложить элементы друг на друга без position: absolute:

.hero-banner {
  display: grid;
  grid-template-areas: "content";
}

.hero-banner__image,
.hero-banner__content {
  grid-area: content; /* Оба занимают одну ячейку — перекрываются */
}

.hero-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-banner__content {
  z-index: 1;
  padding: 48px;
  align-self: end;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

Подсетка (subgrid)

Поддерживается во всех современных браузерах с 2023 года. Позволяет дочерним элементам выравниваться по родительской сетке:

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* Заголовок, описание и кнопка выровнены по всем карточкам */
}

.product-card__title       { grid-row: 1; }
.product-card__description { grid-row: 2; }
.product-card__action      { grid-row: 3; align-self: end; }

Без subgrid выравнивание содержимого карточек по высоте требовало JavaScript или костылей. Теперь — два свойства CSS.

Holy Grail layout (пример с реальными единицами)

.page {
  display: grid;
  grid-template:
    "header" 64px
    "main"   1fr
    "footer" auto
    / 1fr;
}

@media (min-width: 1024px) {
  .page {
    grid-template:
      "header  header  header"  64px
      "nav     main    aside"   1fr
      "footer  footer  footer"  auto
      / 240px  1fr     320px;
  }
}

Одна декларация grid-template включает и grid-template-areas, и grid-template-rows, и grid-template-columns.

Распространённые ошибки

Grid для всего. Grid-контекст тяжелее Flexbox. Для простого ряда кнопок — Flexbox быстрее и проще.

Явные строки без auto.

/* Проблема — если контента больше 3 строк, он выйдет за границу */
grid-template-rows: 200px 100px 300px;

/* Правильно */
grid-auto-rows: auto;
/* или */
grid-template-rows: auto 1fr auto;

Игнорирование gap в пользу margin. В grid-контексте gap — правильный инструмент. margin на дочерних элементах ломает выравнивание.

Сроки