В нашем прошлом гайде мы разобрали Flexbox. Мы выяснили, что он идеален для одномерных (1D) макетов: выравнивания элементов в строке или в колонке. Это идеально для меню, кнопок и карточек.
Но что, если вам нужно сверстать весь макет сайта? С шапкой, контентом, сайдбаром и футером? Здесь в игру вступает CSS Grid.
Grid — это двумерная (2D) система. Она позволяет вам управлять элементами одновременно и по горизонтали, и по вертикали. Это, по сути, таблица, но невероятно мощная и гибкая. И, конечно, в Tailwind CSS для нее есть супер-удобные классы.
Основы: Контейнер, Колонки и Ряды
Чтобы Grid заработал, вы, как и во Flexbox, должны объявить контейнер.
Класс Tailwind: grid
CSS: display: grid;
Но просто grid ничего не сделает. В отличие от Flexbox, Grid не знает, какую сетку вы хотите. Вы должны явно указать, сколько у вас будет колонок и (опционально) рядов.
1. Определение Колонок: grid-cols-{n}
Это свойство говорит, на сколько равных колонок нужно поделить контейнер.
<!-- Сетка из 3-х равных колонок -->
<div class="grid grid-cols-3 bg-slate-800">
<div class="bg-pink-500 p-4">1</div>
<div class="bg-cyan-500 p-4">2</div>
<div class="bg-purple-500 p-4">3</div>
<div class="bg-pink-500 p-4">4</div>
<div class="bg-cyan-500 p-4">5</div>
<div class="bg-purple-500 p-4">6</div>
</div>2. Определение Рядов: grid-rows-{n}
То же самое, но для высоты рядов. Чаще всего высота задается автоматически контентом, но вы можете ее контролировать.
<!-- Сетка из 2-х рядов. Контейнеру нужна высота! -->
<div class="grid grid-cols-3 grid-rows-2 h-48 bg-slate-800">
<div class="bg-pink-500 p-4">1</div> <!-- Ряд 1 -->
<div class="bg-cyan-500 p-4">2</div> <!-- Ряд 1 -->
<div class="bg-purple-500 p-4">3</div> <!-- Ряд 1 -->
<div class="bg-pink-500 p-4">4</div> <!-- Ряд 2 -->
<div class="bg-cyan-500 p-4">5</div> <!-- Ряд 2 -->
<div class="bg-purple-500 p-4">6</div> <!-- Ряд 2 -->
</div>Пространство между: `gap`
Это одно из главных преимуществ Grid (и Flexbox). Раньше нам приходилось использовать margin, что было неудобно. Теперь есть gap (зазор).
<!--
grid-cols-3 — 3 колонки
gap-4 — зазор в 1rem (16px) и по горизонтали, и по вертикали
-->
<div class="grid grid-cols-3 gap-4 bg-slate-800 p-4">
<div class="bg-pink-500 p-4 rounded">1</div>
<div class="bg-cyan-500 p-4 rounded">2</div>
<div class="bg-purple-500 p-4 rounded">3</div>
<div class="bg-pink-500 p-4 rounded">4</div>
<div class="bg-cyan-500 p-4 rounded">5</div>
<div class="bg-purple-500 p-4 rounded">6</div>
</div>Вы также можете задать зазоры раздельно: gap-x-4 (только по горизонтали) и gap-y-8 (по вертикали).
"Растягивание" элементов: `col-span`
Вот здесь и начинается магия Grid. Что, если вы хотите, чтобы один элемент занимал не одну колонку, а две или три?
Для этого используется класс col-span-{n} (span = "растянуться на").
<!-- Сетка на 4 колонки с зазором -->
<div class="grid grid-cols-4 gap-4 bg-slate-800 p-4">
<!-- Этот элемент растянут на 2 колонки -->
<div class="col-span-2 bg-pink-500 p-4 rounded">Я занимаю 2 колонки (1 и 2)</div>
<div class="bg-cyan-500 p-4 rounded">3</div>
<div class="bg-purple-500 p-4 rounded">4</div>
<div class="bg-cyan-500 p-4 rounded">5</div>
<!-- Этот элемент растянут на 3 колонки -->
<div class="col-span-3 bg-pink-500 p-4 rounded">Я занимаю 3 колонки (6, 7 и 8)</div>
</div>Точно так же существует row-span-{n} для растягивания по вертикали.
Практический пример: Макет блога
Давайте сверстаем классический макет блога (Шапка, Сайдбар, Контент, Футер) на Grid. Это займет буквально пару минут.
<!--
Мы создаем сетку из 4-х колонок.
Контейнеру задаем высоту h-screen (во весь экран)
и зазор gap-4.
-->
<div class="grid grid-cols-4 gap-4 h-screen bg-slate-900 p-4">
<!-- Шапка: растягиваем на все 4 колонки -->
<header class="col-span-4 bg-pink-500 rounded-lg p-4 text-white">
Шапка (col-span-4)
</header>
<!-- Сайдбар: занимает 1 колонку -->
<aside class="bg-cyan-500 rounded-lg p-4">
Сайдбар (col-span-1)
</aside>
<!-- Контент: растягиваем на 3 колонки -->
<main class="col-span-3 bg-slate-200 rounded-lg p-4">
Основной контент (col-span-3)
</main>
<!-- Футер: растягиваем на все 4 колонки -->
<footer class="col-span-4 bg-pink-500 rounded-lg p-4 text-white">
Футер (col-span-4)
</footer>
</div>Grid или Flex? Используйте оба!
Вам не нужно выбирать что-то одно. Лучшие макеты используют и то, и другое.
Золотое правило:
Используйте Grid для общей раскладки страницы (<header>, <main>, <aside>).
А внутри этих блоков используйте Flexbox для выравнивания мелких элементов (кнопок, текста, иконок).
Например, в нашем примере выше, вы можете добавить flex justify-between items-center в <header>, чтобы красиво расставить в нем логотип и меню навигации.
