grid-column и grid-row

grid-column и grid-row — свойства grid-элемента, задающие его положение и размер в сетке через номера линий или ключевое слово span.

Зачем нужно

По умолчанию каждый элемент занимает одну ячейку в порядке потока. grid-column и grid-row позволяют явно разместить элемент: растянуть на несколько колонок/строк, поставить в конкретное место, создать нестандартный макет. Это основа для верстки сложных страничных лейаутов и кастомных сеток.

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

  • Растягивание хедера или футера на всю ширину
  • Элемент занимает 2–3 колонки (featured-карточка)
  • Произвольное размещение без изменения HTML-порядка

Синтаксис

/* grid-column: start-line / end-line */
.item {
  grid-column: 1 / 3;     /* от линии 1 до линии 3 (2 колонки) */
  grid-column: 1 / span 2; /* начиная с линии 1, занять 2 колонки */
  grid-column: span 2;     /* занять 2 колонки (начало — автопоток) */
  grid-column: 2;          /* только колонка 2 */
}

/* grid-row: start-line / end-line */
.item {
  grid-row: 1 / 3;
  grid-row: span 2;
}

Примеры

Хедер на всю ширину

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.header {
  grid-column: 1 / -1; /* от первой до последней линии */
}

<div class="container">
  <header class="header">Шапка (4 колонки)</header>
  <div>Блок 1</div>
  <div>Блок 2</div>
  <div>Блок 3</div>
  <div>Блок 4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}
.featured {
  grid-column: span 2;
  grid-row: span 2;
}

<div class="grid">
  <div class="featured">Главная карточка</div>
  <div>Карточка 2</div>
  <div>Карточка 3</div>
  <div>Карточка 4</div>
</div>

Явное размещение по координатам

.sidebar {
  grid-column: 1 / 2;
  grid-row: 1 / 3; /* занимает 2 строки */
}
.content {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

Отрицательные линии

/* -1 всегда означает последнюю линию явной сетки */
.full-width {
  grid-column: 1 / -1;
}
/* Последние 2 колонки */
.item {
  grid-column: -3 / -1;
}

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

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

Связанные темы

Ресурсы