Grid-линии и grid-области

Grid-линии — нумерованные (или именованные) границы между ячейками сетки; grid-области — прямоугольные группы ячеек, задаваемые через grid-template-areas или линии.

Зачем нужно

Понимание линий — ключ к явному позиционированию в Grid. grid-column: 1 / 3 означает "от линии 1 до линии 3", то есть занимает 2 колонки. Именованные линии и области делают код читаемым и документируют раскладку прямо в CSS.

Где используется

Позиционирование элементов в явной сетке
Именованные области для макетов страниц
Создание асимметричных раскладок
Элементы, занимающие несколько ячеек

Основной контент

Grid-линии — базовая концепция

Сетка 3x2 (3 колонки, 2 строки):

Линии колонок:  1   2   3   4
                |   |   |   |
Строка 1:       |[A]|[B]|[C]|
                |   |   |   |
Строка 2:       |[D]|[E]|[F]|
                |   |   |   |
Линии строк:  1               (верхняя)
              2               (средняя)
              3               (нижняя)

Позиционирование по линиям

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

/* Элемент от линии 1 до 3 (занимает 2 колонки) */
.header {
  grid-column: 1 / 3;
  grid-row: 1;
}

/* Span — размах от текущей позиции */
.wide {
  grid-column: 2 / span 3; /* Начало: линия 2, конец: +3 */
}

/* Отрицательные линии считаются с конца */
.full-width {
  grid-column: 1 / -1; /* От первой до последней линии */
}

.last-col {
  grid-column: -2 / -1; /* Последняя колонка */
}

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

.grid {
  display: grid;
  grid-template-columns:
    [sidebar-start] 240px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows:
    [header-start] 64px [header-end main-start] 1fr [main-end footer-start] 48px [footer-end];
}

/* Использование по имени */
.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: main-start / main-end;
}

.header {
  grid-column: sidebar-start / content-end; /* Полная ширина */
  grid-row: header-start / header-end;
}

grid-template-areas

.page {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header  header"   /* 3 ячейки для header */
    "sidebar main    aside"    /* каждая — отдельная ячейка */
    "footer  footer  footer";  /* . = пустая ячейка */
}

/* Пример с пустой ячейкой */
grid-template-areas:
  "header header ."
  "sidebar main main";

grid-area как шортхенд линий

/* grid-area: row-start / col-start / row-end / col-end */
.item {
  grid-area: 1 / 2 / 3 / 4;
  /* row-start: 1, col-start: 2, row-end: 3, col-end: 4 */
}

Частые ошибки

Нумерация с 1, не с 0 — Grid-линии начинаются с 1 (не с 0 как индексы массива)
grid-column: 2 = 2-я линия, не 2-я ячейка — чтобы занять 2-ю ячейку нужно grid-column: 2 / 3 или grid-column: 2 / span 1
Пустые ячейки в grid-template-areas — для пустой ячейки используйте точку (.), не пробел и не кавычки