День 28 | Верстаем блок с использованием CSS Grid

Продвинутый CSS Grid

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

Когда использовать Grid?

• Макеты страниц (header, sidebar, content, footer)
• Галереи изображений
• Карточки товаров
• Сложные формы
• Дашборды

Базовые свойства Grid

grid-template-columns

Определяет количество и размер колонок:

.grid {
  display: grid;
  grid-template-columns: 250px 1fr 200px;
}

Создаёт 3 колонки: первая 250px, вторая занимает оставшееся пространство (1fr), третья 200px.

Единица fr (fraction): 1fr означает "одна доля доступного пространства". Если есть 1fr 2fr, вторая колонка будет в 2 раза шире первой.

grid-template-rows

Определяет количество и размер строк:

.grid {
  grid-template-rows: auto 1fr auto;
}

Создаёт 3 строки: первая и последняя по размеру контента (auto), средняя занимает всё оставшееся пространство.

Именованные области (grid-template-areas)

Самый наглядный способ создания макета:

Как это работает:

• grid-template-areas — определяет схему макета в виде текста
• Каждая строка в кавычках — это строка grid
• Слова разделённые пробелом — это колонки
• Одинаковые слова объединяют ячейки
• grid-area: header — размещает элемент в области "header"

Адаптивность Grid

Grid легко адаптируется для разных экранов:

@media (max-width: 768px) {
  .grid-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

На мобильных все элементы располагаются в одну колонку.

Практическое задание

1. Создайте макет страницы с Grid (header, sidebar, main, footer)
2. Используйте grid-template-areas для наглядности
3. Сделайте макет адаптивным
4. Попробуйте разные варианты grid-template-columns