Grid-контейнер и grid-элементы

Grid-контейнер — элемент с display: grid, его прямые потомки становятся grid-элементами, участвующими в двумерной раскладке.

Зачем нужно

Как и в Flexbox, в Grid важно разделять свойства контейнера и элементов. Контейнер задаёт структуру сетки (grid-template-columns, gap, align-items), элементы управляют своим положением (grid-column, grid-row, align-self). Знание всех свойств обоих уровней — основа работы с Grid.

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

  • Любой Grid-layout: галерея, дашборд, макет страницы
  • Управление колонками и строками
  • Позиционирование конкретных элементов

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

Свойства Grid-контейнера

.container {
  display: grid;            /* или inline-grid */

  /* Определение колонок */
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-columns: 200px 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  /* Определение строк */
  grid-template-rows: auto 1fr auto;
  grid-template-rows: 64px 1fr 48px;

  /* Именованные области */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";

  /* Шортхенд */
  grid-template: auto 1fr / 200px 1fr;

  /* Отступы */
  gap: 16px;
  gap: 16px 24px;         /* row-gap column-gap */
  row-gap: 16px;
  column-gap: 24px;

  /* Выравнивание всех элементов */
  justify-items: start;   /* start | end | center | stretch */
  align-items: stretch;   /* start | end | center | stretch | baseline */
  place-items: center;    /* align-items + justify-items */

  /* Выравнивание сетки в контейнере */
  justify-content: start; /* start | end | center | stretch | space-between... */
  align-content: start;
  place-content: center;

  /* Автоматические строки */
  grid-auto-rows: 200px;
  grid-auto-rows: minmax(100px, auto);

  /* Направление авто-заполнения */
  grid-auto-flow: row;    /* row | column | dense */
}

Свойства Grid-элементов

.item {
  /* Явное позиционирование по линиям */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-column: 1 / 3;       /* шортхенд */
  grid-column: 1 / span 2;  /* начало + размах */
  grid-column: span 2;      /* только размах */

  grid-row-start: 2;
  grid-row-end: 4;
  grid-row: 2 / 4;

  /* Шортхенд row-start / col-start / row-end / col-end */
  grid-area: 2 / 1 / 4 / 3;

  /* Именованная область */
  grid-area: header;

  /* Переопределение выравнивания */
  justify-self: center;
  align-self: end;
  place-self: center end;

  /* Слой (z-index работает в grid) */
  z-index: 2;
}

Пример сетки

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

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

.item-b { grid-column: 3; }  /* автоматически в 1-ю строку */
.item-c { grid-column: 4; }

grid-auto-flow: dense

/* Автоматически заполняет дыры в сетке */
.packed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense; /* Плотная упаковка */
}

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

  • grid-column: 2 = вторая линия, не вторая ячейка — нумерация начинается с 1; линия 2 — это граница между 1-й и 2-й колонками
  • grid-template-areas требует каждую ячейку — все ячейки в строке должны быть заполнены именем или точкой (.)
  • align-items vs align-content — align-items выравнивает элементы в ячейках, align-content — строки сетки в контейнере

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

Ресурсы