CSS Grid

💡 Объяснение

Сетка — как тетрадь в клетку

Flexbox отлично раскладывает элементы в одну линию (ряд или колонку). А когда нужно сразу и строки, и столбцы — галерея фотографий, плитка карточек, раскладка всей страницы — удобнее CSS Grid. Grid делит контейнер на клетки, как тетрадь или шахматную доску, и расставляет элементы по ним.

Включаем сетку

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Как и во Flexbox, свойства пишем родителю, а его прямые дети автоматически раскладываются по клеткам: слева направо, а когда ряд заполнен — на следующую строку.

Колонки: grid-template-columns

Сколько значений — столько колонок. Каждое значение — ширина колонки:

• 200px 200px 200px — три колонки по 200 пикселей;
• 1fr 1fr 1fr — три равные колонки на всю ширину. fr (fraction — доля) — это доля свободного места, как кусочки пиццы;
• 2fr 1fr — две колонки, первая вдвое шире второй;
• 250px 1fr — боковая колонка 250px, а основная забирает всё остальное.

Чтобы не повторять одно и то же, есть repeat: repeat(4, 1fr) = 1fr 1fr 1fr 1fr.

Строки и промежутки

• grid-template-rows — высоты строк (часто не нужно: строки создаются сами по содержимому);
• gap: 16px; — промежутки между клетками по обеим осям; gap: 20px 10px; — между строками 20, между колонками 10.

Большой элемент на несколько клеток

.big {
  grid-column: span 2;   /* занять 2 колонки */
  grid-row: span 2;      /* и 2 строки */
}

Так в галерее делают одну «главную» фотографию крупнее остальных. Остальные элементы сами обтекают её и занимают свободные клетки.

Адаптивная сетка без медиазапросов

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

Это «волшебная формула»: «сделай столько колонок, сколько влезет, но каждая не уже 150px, а остаток места раздели поровну». На широком экране будет 6 колонок, на планшете 4, на телефоне 2 — и ни строчки дополнительного кода. minmax(a, b) означает «не меньше a и не больше b».

Одинаковые картинки в галерее

Фотографии бывают разных пропорций, и сетка получается неровной. Решение:

.gallery img {
  width: 100%;
  aspect-ratio: 1;       /* квадрат (1:1). Для 4:3 — 4 / 3 */
  object-fit: cover;     /* заполнить клетку, лишнее обрезать */
  border-radius: 12px;
}

object-fit: cover работает для картинок так же, как background-size: cover для фона: картинка не растягивается и не сплющивается, а аккуратно обрезается.

Раскладка страницы: grid-template-areas

Grid умеет рисовать раскладку «картинкой» из названий областей:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "menu   content"
    "footer footer";
}
header { grid-area: header; }
nav    { grid-area: menu; }
main   { grid-area: content; }
footer { grid-area: footer; }

Каждая строка в кавычках — строка сетки, каждое слово — клетка. Одинаковые слова рядом объединяются в одну область.

Flexbox или Grid?

• Flexbox — одно направление: меню, ряд кнопок, шапка, элементы внутри карточки.
• Grid — два направления: галерея, плитка карточек, раскладка страницы.

Их часто используют вместе: страница разложена Grid, а меню в шапке — Flexbox.

Потренируйся

Игра Grid Garden (cssgridgarden.com, есть русский язык): поливай морковку, управляя свойствами Grid.

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

• display: grid без grid-template-columns — все элементы в одну колонку, «ничего не изменилось».
• Картинки разной высоты — нет aspect-ratio и object-fit.
• Колонки в px на всю ширину — на телефоне сетка вылезает за экран. Используй fr и minmax.
• Опечатка в названии области в grid-template-areas.

Проверь себя

1. Что означает 1fr?
2. Как сделать, чтобы элемент занимал две колонки?
3. Когда лучше Flexbox, а когда Grid?