Grid: колонки, строки, области

Собирай галереи и полные макеты страниц с помощью колонок, строк и именованных областей CSS Grid.

9 мин · 3 вопросов

Flexbox выравнивает вдоль одной оси, а Grid управляет сразу двумя. Как только твой макет похож на таблицу - галерея фотографий, панель показателей, целая страница с шапкой, боковой панелью и подвалом - Grid оказывается нужным инструментом. Контейнер задаёт структуру из колонок и строк, а дочерние элементы размещаются автоматически или ровно там, где ты выберешь.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Единица fr (fraction, доля) делит доступное место: 1fr 2fr создаёт две колонки, где вторая вдвое шире. В отличие от процентов, fr учитывает gap без всяких вычислений с твоей стороны. Чтобы выделить элемент, растяни его на несколько дорожек через grid-column и grid-row.

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

Для целой страницы grid-template-areas позволяет нарисовать макет прямо в CSS. Каждая строка задаёт один ряд сетки, каждое слово - именованную область. Дочерний элемент затем размещается через grid-area. Результат читается как чертёж архитектора: это самый понятный способ разложить страницу.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.site-header { grid-area: header; }
.site-nav { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Что означает единица fr в grid-template-columns: 1fr 2fr?
   • Долю доступного места контейнера
   • Процент от ширины экрана
   • Фиксированный размер в пикселях
2. Какое объявление создаёт три колонки одинаковой ширины?
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. Для чего служит grid-template-areas?
   • Чтобы называть области сетки, куда дочерние элементы попадают через grid-area
   • Чтобы задать размер колонок сетки
   • Чтобы создавать анимации между ячейками