Привет, коллега. Если ты, как и я, большую часть времени проводишь за написанием PHP-кода, то верстка может казаться чем-то второстепенным. Но когда на проект падает задача сделать адаптивный макет, руки опускаются. Раньше я мучился с флексами, float'ами и бесконечными медиа-запросами. Пока не открыл для себя CSS Grid. Эта технология меняет правила игры. В этой статье я расскажу, как с помощью Grid делать адаптивные макеты быстро и без головной боли. Поехали.

Почему CSS Grid, а не Flexbox?

Flexbox отлично подходит для одномерных макетов — строка или колонка. Но когда нужно сделать сетку из карточек, таблицу с данными или сложный дашборд, Flexbox превращается в ад из оберток и отступов. CSS Grid создан для двумерных макетов. Ты одновременно управляешь и строками, и колонками. Это как строить дом из готовых блоков, а не лепить каждый кирпич отдельно.

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

Основы CSS Grid: что нужно знать

Давай разберем базовые понятия. Представь, что у тебя есть контейнер (родитель) и его дети (элементы). Ты говоришь контейнеру: "Будь сеткой". А потом задаешь, сколько колонок и строк тебе нужно.

Вот минимальный пример:

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

Здесь grid-template-columns задает три колонки одинаковой ширины (1fr — это одна доля свободного пространства). gap — это отступы между ячейками. Просто, правда?

Для строк используй grid-template-rows. Но чаще строки определяются автоматически, по содержимому. Это удобно.

Адаптивность без медиа-запросов: auto-fit и minmax

Вот где CSS Grid раскрывается на полную. С помощью функций auto-fit и minmax можно сделать адаптивную сетку, которая подстраивается под ширину экрана без единого медиа-запроса. Звучит как магия, но это работает.

Пример:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

Что здесь происходит? repeat(auto-fit, minmax(250px, 1fr)) означает: создавай столько колонок, сколько поместится, но каждая колонка должна быть не меньше 250 пикселей. Если места мало — колонки переносятся на новую строку. Если много — они растягиваются, заполняя пространство.

Это идеально для карточек товаров, новостей или списка пользователей. Ты просто выводишь данные из PHP, а CSS сам решает, как их расположить.

Правило: Используй minmax(250px, 1fr) для колонок, чтобы контент не сжимался в узкую полоску на маленьких экранах. 250px — это минимальная ширина, при которой карточка читается нормально.

Практический пример: выводим список пользователей из PHP

Допустим, у тебя есть массив пользователей из базы данных. Ты хочешь вывести их в виде сетки карточек. Вот как это сделать с помощью CSS Grid.

PHP-код для вывода:

$users = [
  ['name' => 'Иван', 'email' => 'ivan@example.com'],
  ['name' => 'Мария', 'email' => 'maria@example.com'],
  ['name' => 'Петр', 'email' => 'petr@example.com'],
  ['name' => 'Анна', 'email' => 'anna@example.com'],
  ['name' => 'Сергей', 'email' => 'sergey@example.com'],
];
?>
<div class="user-grid">
  <?php foreach ($users as $user): ?>
    <div class="user-card">
      <h3><?= $user['name'] ?></h3>
      <p><?= $user['email'] ?></p>
    </div>
  <?php endforeach; ?>
</div>

А вот CSS, который сделает это адаптивным:

.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.user-card {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

На десктопе будет три-четыре колонки, на планшете две, на телефоне одна. И никаких медиа-запросов.

Тонкая настройка: области и именованные линии

Если тебе нужно расположить элементы не по порядку, а в определенных местах сетки, используй grid-template-areas. Это как расставлять мебель в комнате: ты говоришь, где шапка, где сайдбар, а где контент.

Пример для типичного макета:

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

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

Адаптивность тут делается через медиа-запросы, но их нужно всего несколько:

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

На мобилке сайдбар уходит вниз, а контент остается наверху. Удобно и читаемо.

Сравнение подходов к адаптивности

Чтобы ты не запутался, вот таблица с основными методами:

Метод Когда использовать Плюсы Минусы
auto-fit + minmax Сетки с повторяющимися элементами (карточки, галереи) Не нужны медиа-запросы, автоматическая подстройка Сложно контролировать точное количество колонок
Медиа-запросы + grid-template-areas Сложные макеты с шапкой, футером, сайдбаром Полный контроль, легко читать Нужно писать медиа-запросы для каждого брейкпоинта
Фиксированные колонки + медиа Когда нужно строгое количество колонок Предсказуемость Меньше гибкости
Лайфхак: Если ты используешь CSS Grid вместе с PHP, всегда проверяй, как выглядит макет при пустых данных. Добавь минимальные высоты для контейнеров, чтобы страница не схлопывалась.

Что в итоге

CSS Grid — это мощный инструмент, который делает адаптивную верстку простой и предсказуемой. Для PHP-разработчика это особенно ценно: ты можешь сосредоточиться на логике, а не на танцах с бубном вокруг медиа-запросов. Используй auto-fit и minmax для сеток карточек, а grid-template-areas для сложных макетов. Не бойся экспериментировать — Grid прощает ошибки и дает гибкость. Попробуй на своем следующем проекте, и ты удивишься, как раньше жил без него.

Студия WNDER