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

Сборник типичных ошибок при работе с CSS Grid и их объяснений — от неправильного fr до проблем с minmax и grid-template-areas.

Зачем нужно

CSS Grid имеет несколько нетривиальных поведений: fr не работает как ожидается при наличии min-content, grid-area не позиционирует без grid-template-areas, gap ведёт себя по-разному в разных контекстах. Понимание этих ловушек предотвращает часы отладки.

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

  • Любой проект с CSS Grid
  • Адаптивные карточные сетки
  • Сложные макеты страниц
  • Дашборды с виджетами

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

Ошибка 1: fr не учитывает min-content

/* Проблема: длинный текст или изображение растягивают 1fr колонку */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Если в первой колонке длинная строка — она шире чем 1fr */

/* Фикс: использовать minmax(0, 1fr) */
.grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Или */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

Ошибка 2: grid-area без grid-template-areas

/* НЕ РАБОТАЕТ */
.header { grid-area: header; }

/* РАБОТАЕТ — нужно объявить области на контейнере */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
}
.header { grid-area: header; }

Ошибка 3: gap с процентами

/* gap: 5% — считается от ширины контейнера */
/* При изменении размера контейнера gap меняется непредсказуемо */
.grid {
  gap: 5%; /* Нежелательно */
  gap: 16px; /* Лучше */
}

Ошибка 4: Перепутаны строки и колонки

/* grid-template-columns — горизонталь */
/* grid-template-rows — вертикаль */

/* Ошибка: пытаются задать "3 ряда" через columns */
.wrong {
  grid-template-columns: repeat(3, 1fr); /* 3 колонки, не ряда */
}

/* Для 3 равных рядов нужна явная высота */
.correct {
  grid-template-rows: repeat(3, 1fr);
  height: 300px; /* Нужна высота чтобы fr работал */
}

Ошибка 5: auto-fill дает разные результаты

/* minmax(200px, 1fr) с auto-fill — ожидаем 3 колонки в 600px */
/* Но если контейнер не имеет явной ширины — колонки могут не создаться */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Контейнер должен иметь определённую ширину */
}

Ошибка 6: grid-column: span за пределами сетки

/* Элемент с span > количества колонок переносится на новый ряд */
.grid { grid-template-columns: repeat(3, 1fr); }
.item { grid-column: span 4; } /* Создаст новую строку с 1 элементом */

/* Фикс: span не больше количества колонок */
.item { grid-column: span 3; } /* Максимум = кол-во колонок */

Ошибка 7: place-items vs place-content

/* place-items — выравнивает элементы в их ячейках */
.grid { place-items: center; }

/* place-content — выравнивает весь grid-контент */
.grid { place-content: center; }

/* Для центрирования одного элемента в контейнере */
.container {
  display: grid;
  place-items: center;
  min-height: 300px;
}

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

  • Забывают minmax(0, 1fr) — 1fr без нуля не защищает от переполнения текстом
  • Путают grid-column: 2 и grid-column: span 2 — первое помещает в конкретную линию, второе растягивает на 2 ячейки
  • grid-area как shorthand — grid-area: 1 / 1 / 3 / 3 означает row-start / col-start / row-end / col-end

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

Ресурсы