Grid Layout: двумерная система компоновки — grid-template-columns/rows, areas

🔥 Введение: Почему Grid — это магия

CSS Grid — это не просто ещё один инструмент вёрстки. Это полноценная двумерная система компоновки, где у вас есть полный контроль над строками, столбцами и даже областями! Если Flexbox — это "линейный" подход, то Grid — это суперсила для сложных макетов.

Готовы превратить хаотичные div'ы в аккуратные, предсказуемые сетки? Поехали!

🏗️ Основы: grid-template-columns и grid-template-rows

Эти свойства определяют количество и размеры столбцов и строк в вашей сетке.

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr; /* 3 колонки: 100px, 200px, остальное пространство */
  grid-template-rows: 50px 150px; /* 2 строки: 50px и 150px */
}

Что тут происходит?
- grid-template-columns создаёт три колонки:
- Первая — жёстко 100px,
- Вторая — 200px,
- Третья (1fr) займёт всё оставшееся пространство (фракция).
- grid-template-rows задаёт две строки фиксированной высоты.

💡 Совет: Используйте fr (фракции) для гибкости. Например, 1fr 2fr означает соотношение 1:2.

🧩 Работа с повторениями: repeat()

Если у вас много одинаковых колонок/строк, не перечисляйте их вручную! Используйте repeat():

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Три колонки по 1fr */
  grid-template-rows: repeat(2, 100px); /* Две строки по 100px */
}

Бонус: Можно комбинировать!

.container {
  grid-template-columns: 100px repeat(2, 1fr) 50px; /* 100px | 1fr | 1fr | 50px */
}

🗺️ Grid Areas: Как называть и размещать элементы

grid-template-areas позволяет визуально задавать макет, присваивая элементам имена и размещая их в сетке.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Как это работает?
1. Сначала объявляем сетку (колонки и строки).
2. Затем рисуем макет в grid-template-areas.
3. Присваиваем элементам grid-area (названия из шаблона).

🌟 Простота — сила! Если вы визуал, этот метод станет вашим любимым.

📏 Пример: Реальный макет сайта

Давайте сверстаем типичный лендинг с шапкой, сайдбаром, контентом и подвалом.

<div class="layout">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh; /* Занимаем весь экран */
}

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: content; }
footer { grid-area: footer; }

Результат:
- Шапка и подвал растягиваются на всю ширину.
- Сайдбар фиксированный (200px), контент — резиновый.

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

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

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

Что изменилось?
- Теперь одна колонка (1fr).
- Сайдбар (sidebar) идёт после контента.

🚀 Продвинутый приём: Именованные линии

Вы можете назначать имена линиям между столбцами/строками для точного позиционирования.

.container {
  display: grid;
  grid-template-columns: [start] 100px [content-start] 1fr [content-end] 50px [end];
}

.item {
  grid-column: content-start / content-end; /* Элемент занимает пространство между линиями */
}

Зачем?
- Упрощает работу с сложными макетами.
- Делает код читаемым (не нужно помнить индексы).

🎯 Итоги: Что запомнить

1. grid-template-columns и grid-template-rows — база для создания сетки.
2. repeat() — удобный способ задавать повторяющиеся значения.
3. grid-template-areas — визуальный подход к вёрстке.
4. Адаптивность легко достигается с @media и переопределением областей.
5. Именованные линии — мощный инструмент для точного контроля.

Теперь ваши макеты станут чище, гибче и логичнее!

📌 Кстати: Если хотите глубже разобраться в Grid, посмотрите разборы Данилы Бежина на YouTube. Он объясняет сложные вещи с огоньком! 🔥

Готовы экспериментировать? Открывайте Codepen и создавайте свои идеальные сетки! 🚀