Вы когда-нибудь мучились с Flexbox, пытаясь выстроить сложную сетку? Или использовали фреймворки вроде Bootstrap, но чувствовали, что они сковывают? Тогда эта статья для вас. CSS Grid — это мощный инструмент, который позволяет создавать любые макеты без лишних телодвижений. Я покажу, как это работает, на примерах из реальной жизни.

Что такое CSS Grid и зачем он нужен?

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

Для PHP-разработчика это особенно полезно, когда нужно быстро сверстать сложный макет, например, админ-панель или дашборд. Вы не будете тратить часы на выравнивание блоков.

Основы CSS Grid: как начать

Чтобы создать сетку, достаточно задать контейнеру свойство display: grid;. Затем можно определить количество и размеры колонок и строк с помощью свойств grid-template-columns и grid-template-rows.

Пример базовой сетки

Допустим, у нас есть три колонки одинаковой ширины. Пишем HTML:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

И CSS:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Здесь 1fr — это доля свободного пространства. Три фракции делят ширину поровну. gap задает отступы между ячейками.

Правило: Всегда используйте 1fr вместо процентов или пикселей, если хотите, чтобы колонки подстраивались под ширину экрана. Это избавит от медиа-запросов в 90% случаев.

Сложные макеты: как объединять ячейки

Самая крутая фишка Grid — возможность объединять ячейки. Это как в Excel: вы можете сделать одну ячейку шире других. Для этого используются свойства grid-column и grid-row.

Пример макета с шапкой и сайдбаром

Представьте типичный макет сайта: шапка, левая колонка (сайдбар), основной контент и подвал. С Grid это делается легко:

<div class="layout">
  <header>Шапка</header>
  <aside>Сайдбар</aside>
  <main>Основной контент</main>
  <footer>Подвал</footer>
</div>
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

header {
  grid-column: 1 / -1; /* Растягиваем на всю ширину */
}

footer {
  grid-column: 1 / -1;
}

Здесь grid-column: 1 / -1 означает, что элемент занимает от первой линии до последней. Строки заданы как auto (под контент), 1fr (оставшееся место) и auto.

Именованные области: делаем код читаемым

Когда макет становится сложным, лучше использовать именованные области. Это позволяет задать расположение элементов прямо в контейнере.

Пример с именованными областями

Тот же макет, но с использованием grid-template-areas:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

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

Это похоже на ASCII-рисунок. Очень наглядно. Если нужно что-то поменять, вы просто редактируете строки в grid-template-areas.

Практический пример: дашборд для PHP-приложения

Допустим, вы пишете админ-панель на PHP. Вам нужно разместить виджеты: статистика, графики, таблица. Используем Grid для гибкого расположения.

HTML-шаблон

<div class="dashboard">
  <div class="widget widget-stats">Статистика</div>
  <div class="widget widget-chart">График</div>
  <div class="widget widget-table">Таблица</div>
  <div class="widget widget-activity">Активность</div>
</div>

CSS-стили

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.widget-stats {
  grid-column: 1 / 3; /* Занимает две колонки */
}

.widget-chart {
  grid-column: 3 / 4; /* Третья колонка */
}

.widget-table {
  grid-column: 1 / 4; /* На всю ширину */
}

.widget-activity {
  grid-column: 1 / 2;
}

Обратите внимание: repeat(3, 1fr) — это сокращение от 1fr 1fr 1fr. Удобно, когда колонок много.

Интеграция с PHP

В PHP вы можете генерировать такие виджеты динамически. Например, через цикл:

$widgets = ['stats', 'chart', 'table', 'activity'];
foreach ($widgets as $widget) {
    echo "<div class='widget widget-$widget'>" . ucfirst($widget) . "</div>";
}

Главное — правильно задать классы, чтобы CSS подхватил нужное позиционирование.

Таблица свойств CSS Grid для быстрого старта

Свойство Назначение Пример
display: grid; Включает сетку display: grid;
grid-template-columns Определяет колонки grid-template-columns: 1fr 2fr;
grid-template-rows Определяет строки grid-template-rows: 100px auto;
gap Отступы между ячейками gap: 10px;
grid-column Объединение колонок grid-column: 1 / 3;
grid-row Объединение строк grid-row: 1 / 2;
grid-template-areas Именованные области grid-template-areas: 'header header';
Лайфхак: Если вы используете grid-template-areas, не забывайте, что каждая область должна быть прямоугольной. Нельзя сделать Г-образную область. В таких случаях используйте отдельные свойства grid-column и grid-row.

Заключение

CSS Grid — это мощный и гибкий инструмент. Он избавляет от необходимости использовать фреймворки для сложных макетов. Вы можете создавать адаптивные сетки без кучи медиа-запросов. А для PHP-разработчика это еще и способ быстрее верстать админки и дашборды.

Что в итоге: освойте Grid, и ваша верстка станет чище, а код — короче. Начните с простых примеров, а потом переходите к сложным макетам. Удачи!

Студия WNDER