ШПАРГАЛКА

CSS Grid

Шпаргалка по CSS Grid: grid-template-columns/rows/areas, fr, repeat(), minmax(), auto-fill/auto-fit, размещение элементов и сравнение с Flexbox.

CSS Grid — двумерная система раскладки: одновременно управляет и строками, и колонками. В отличие от Flexbox (один поток вдоль главной оси) Grid задаёт сетку из ячеек, в которые попадают элементы. Эта шпаргалка собирает свойства контейнера и элементов, функции repeat(), minmax(), единицу fr и типовые макеты, которые можно собрать без единого медиазапроса.

Grid-контейнер

Сетка появляется, как только элементу задано display: grid (или inline-grid). Прямые потомки автоматически становятся grid-элементами и раскладываются по ячейкам. Все свойства сетки делятся на две группы: свойства контейнера (описывают саму сетку) и свойства элементов (описывают, какие ячейки занимает конкретный потомок).

.container {
  display: grid;          /* блочный grid-контейнер */
  /* display: inline-grid; — строчный вариант */
}

grid-template-columns и grid-template-rows

Эти свойства задают дорожки (tracks) — ширину колонок и высоту строк. Значениями могут быть любые единицы длины: px, %, em, rem, fr, а также auto (по содержимому).

.container {
  display: grid;
  /* три колонки: 200px, гибкая, 100px */
  grid-template-columns: 200px 1fr 100px;
  /* две строки */
  grid-template-rows: 80px auto;
}

Каждое значение в списке — это отдельная дорожка. Между дорожками лежат линии сетки, пронумерованные с 1. Например, три колонки образуют 4 вертикальные линии (1, 2, 3, 4).

Единица fr

fr (fraction) — доля свободного места в контейнере. Сначала вычитаются фиксированные дорожки и зазоры, а остаток делится между fr-дорожками пропорционально их числам.

.container {
  display: grid;
  /* свободное место делится 1:2: вторая колонка вдвое шире */
  grid-template-columns: 1fr 2fr;
}

.mixed {
  display: grid;
  /* 250px зафиксировано, остаток уходит в 1fr */
  grid-template-columns: 250px 1fr;
}

fr учитывает зазоры gap: они вычитаются до распределения, поэтому колонки не вылезают за контейнер.

Функция repeat()

repeat() избавляет от повторов в списке дорожек. Первый аргумент — сколько раз, второй — шаблон.

.container {
  display: grid;
  /* эквивалентно 1fr 1fr 1fr 1fr */
  grid-template-columns: repeat(4, 1fr);
}

.pattern {
  display: grid;
  /* повторяющийся шаблон из двух дорожек: 100px 1fr 100px 1fr 100px 1fr */
  grid-template-columns: repeat(3, 100px 1fr);
}

minmax()

minmax(min, max) задаёт диапазон размера дорожки: не меньше min и не больше max. Часто комбинируется с 1fr, чтобы колонка тянулась, но не схлопывалась.

.container {
  display: grid;
  /* колонка минимум 150px, дальше растёт до 1fr */
  grid-template-columns: minmax(150px, 1fr) 3fr;
}

Ключевое слово auto внутри minmax означает «по содержимому». А min-content и max-content — размер по самому узкому/широкому содержимому дорожки.

auto-fill и auto-fit

Вместо точного числа повторов в repeat() можно передать auto-fill или auto-fit — браузер сам решит, сколько колонок поместится. Это основа адаптивных сеток без медиазапросов.

.cards {
  display: grid;
  gap: 16px;
  /* столько колонок по 200px+, сколько влезет */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Разница тонкая, но важная при незаполненном ряде:

ЗначениеПоведение при нехватке элементов
auto-fillОставляет пустые «призрачные» дорожки — элементы не растягиваются на всю ширину.
auto-fitСхлопывает пустые дорожки до нуля — имеющиеся элементы растягиваются и заполняют ряд.

gap

gap задаёт зазоры между дорожками (раньше — grid-gap). Можно указать раздельно для строк и колонок через row-gap и column-gap.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;            /* и по строкам, и по колонкам */
  /* gap: 12px 24px;    — сначала row-gap, потом column-gap */
}

grid-template-areas

grid-template-areas позволяет рисовать раскладку «ASCII-картой»: каждой ячейке даётся имя, а элементы привязываются к именам через grid-area. Точка . означает пустую ячейку.

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

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

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

Выравнивание содержимого: justify-items и align-items

Эти свойства выравнивают содержимое каждой ячейки внутри неё. justify-items — по горизонтали (вдоль колонок), align-items — по вертикали (вдоль строк). Значения: start, end, center, stretch (по умолчанию).

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;  /* элементы по центру ячейки по горизонтали */
  align-items: center;    /* и по вертикали */
}

Выравнивание сетки: justify-content и align-content

Когда суммарный размер дорожек меньше контейнера, появляется свободное место вокруг сетки. justify-content и align-content распределяют именно его. Значения: start, end, center, space-between, space-around, space-evenly.

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* фиксированные дорожки */
  width: 100%;
  justify-content: space-between; /* раздвигаем колонки по ширине */
  align-content: center;
}

Запомнить: *-items двигают содержимое внутри ячеек, *-content двигают всю сетку как целое.

grid-auto-flow и неявные дорожки

Если элементов больше, чем явных ячеек, Grid создаёт неявные дорожки. grid-auto-flow задаёт направление автоматического размещения: row (по умолчанию), column или с добавкой dense (плотная упаковка дыр).

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense; /* заполняем пробелы более поздними элементами */
  /* высота неявно созданных строк */
  grid-auto-rows: minmax(100px, auto);
  /* grid-auto-columns: 1fr; — для column-потока */
}

Свойства элементов: grid-column и grid-row

Элемент по умолчанию занимает одну ячейку. grid-column и grid-row растягивают его между линиями сетки. Синтаксис: начальная-линия / конечная-линия. Ключевое слово span N — занять N дорожек.

.item-a {
  /* от 1-й до 3-й вертикальной линии = две колонки */
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.item-b {
  grid-column: span 2; /* занять 2 колонки от текущей позиции */
}

.item-c {
  grid-column: 2 / -1; /* со 2-й линии до последней (-1) */
}

Отрицательные индексы линий считаются с конца: -1 — последняя линия, удобно «дотянуть до края».

grid-area как шорткат

grid-area объединяет четыре линии в одно свойство: row-start / column-start / row-end / column-end. Либо принимает имя области из grid-template-areas.

.item {
  /* строки 1..3, колонки 2..4 */
  grid-area: 1 / 2 / 3 / 4;
}

.featured {
  grid-area: hero; /* имя из grid-template-areas */
}

justify-self и align-self

Эти свойства переопределяют выравнивание одного конкретного элемента внутри его ячейки, перебивая justify-items/align-items контейнера. Значения те же: start, end, center, stretch.

.special {
  justify-self: end;   /* прижать к правому краю ячейки */
  align-self: start;   /* прижать к верху ячейки */
}

Именованные линии

Линиям сетки можно давать имена прямо в квадратных скобках внутри grid-template-columns/rows. Дальше на них ссылаются по имени — код становится самодокументируемым.

.container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [content-end];
}

.main {
  grid-column: content-start / content-end;
}

Имена и числовые индексы можно смешивать; одна линия может иметь несколько имён.

Макет: галерея картинок

Адаптивная галерея, где плитки сами переносятся и заполняют ширину — без медиазапросов, на auto-fit и minmax().

.gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* выделить первую плитку на 2x2 */
.gallery .big {
  grid-column: span 2;
  grid-row: span 2;
}

Макет: Holy Grail

Классический «святой грааль»: шапка, подвал во всю ширину и три колонки между ними (навигация, контент, доп. панель). На grid-template-areas читается как картинка.

.holy-grail {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 200px 1fr 160px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "nav     main    aside"
    "footer  footer  footer";
}

.holy-grail > header { grid-area: header; }
.holy-grail > nav    { grid-area: nav; }
.holy-grail > main   { grid-area: main; }
.holy-grail > aside  { grid-area: aside; }
.holy-grail > footer { grid-area: footer; }

Макет: карточки без медиазапросов

Сетка карточек, которая сама подстраивает число колонок под ширину экрана. Главная строчка — та же связка auto-fill/auto-fit + minmax().

.cards {
  display: grid;
  gap: 24px;
  /* минимум 240px на карточку, дальше растягиваются */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto; /* шапка, тело, футер карточки */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
}

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

Grid или Flexbox: когда что

Оба инструмента дополняют друг друга, а не конкурируют. Грубое правило: Grid — для двумерных раскладок (строки и колонки одновременно, каркас страницы), Flexbox — для одномерных (ряд кнопок, меню, выравнивание элементов в одну линию).

КритерийGridFlexbox
ИзмеренияДва (строки + колонки)Одно (главная ось)
ПодходСначала задаём сетку, в неё кладём контентСначала контент, он диктует размеры
Типичное применениеКаркас страницы, галереи, дашбордыНавбар, тулбар, группа кнопок, центрирование
Перенос строкЧерез дорожки и auto-fill/auto-fitЧерез flex-wrap
Точное позиционированиеДа, по линиям и областямТолько порядок и order

На практике их часто вкладывают: Grid задаёт общий каркас страницы, а внутри отдельных ячеек Flexbox выравнивает мелкие элементы. Например, карточка — это grid-ячейка, а её футер с кнопками — flex-контейнер.

Шпаргалка по свойствам

УровеньСвойствоНазначение
Контейнерdisplay: gridВключает сетку
Контейнерgrid-template-columns / rowsРазмеры колонок и строк
Контейнерgrid-template-areasРаскладка по именованным областям
КонтейнерgapЗазоры между дорожками
Контейнерjustify-items / align-itemsСодержимое внутри ячеек
Контейнерjustify-content / align-contentВся сетка в контейнере
Контейнерgrid-auto-flow / grid-auto-rowsПоведение неявных дорожек
Элементgrid-column / grid-rowРазмещение по линиям
Элементgrid-areaШорткат линий или имя области
Элементjustify-self / align-selfВыравнивание одного элемента
Поддержать проект