Developer

Grid

↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Grid — двумерная раскладка; спрашивают fr, minmax, auto-fit, grid-template-areas.

Объяснение

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;            /* сайдбар + гибкая колонка */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 16px;
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
 
/* Адаптивная сетка карточек без media queries */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
ПонятиеСмысл
frдоля свободного пространства
minmax(min, max)диапазон размера трека
repeat(n, …) / auto-fill / auto-fitповторение; auto-fit схлопывает пустые треки
grid-auto-flow, grid-auto-rowsнеявные треки
grid-column: 1 / span 2размещение по линиям
place-items, justify-*, align-*выравнивание
subgridвложенная сетка использует треки родителя
denseзаполнение пропусков

Flexbox vs Grid: flex — одна ось (ряд или колонка), контент определяет размеры; grid — две оси, макет определяет размеры. Часто вместе: grid для каркаса страницы, flex внутри компонентов.

Нюансы и подводные камни

  • 1fr имеет минимум auto: длинное содержимое расширяет колонку — используйте minmax(0, 1fr).
  • Разница auto-fill и auto-fit проявляется, когда элементов меньше, чем помещается.
  • Неявные строки создаются автоматически: задавайте grid-auto-rows.
  • Grid не заменяет таблицу для табличных данных.

Практика

  1. Сверстайте каркас страницы через grid-template-areas и перестройте на мобильных.
  2. Сделайте галерею с auto-fill/minmax.
  3. Используйте subgrid для выравнивания заголовков карточек.

Вопросы с ответами

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

Вид графа

Обратные ссылки