В прошлой статье мы познакомились с контейнер-кверями. Они позволяют карточкам и блокам адаптироваться по своей ширине. Но в реальных проектах почти всегда используется комбинация: глобальные брейкпоинты и локальные контейнер-квери. Это делает интерфейсы гибкими и «живыми».

Зачем совмещать?

• Брейкпоинты (sm:, md:, lg:) управляют структурой всей страницы: сетки, колонки, наличие или отсутствие элементов.
• Контейнер-квери (@sm:, @md:) дают каждому компоненту умение перестраиваться в зависимости от того, сколько места ему доступно.

Вместе они работают так: страница перестраивается глобально, а компоненты внутри адаптируются локально.

Пример 1. Сетка карточек

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="@container bg-white p-4 rounded shadow">
    <div class="grid grid-cols-1 @md:grid-cols-2 gap-4">
      <img src="headphones.jpg" class="w-full h-32 object-cover rounded">
      <div>
        <h3 class="text-lg font-bold @md:text-xl">Наушники Pro</h3>
        <p class="text-gray-600 mb-2">Беспроводные с шумоподавлением</p>
        <button class="bg-brand text-white px-3 py-2 rounded">Купить</button>
      </div>
    </div>
  </div>
</div>

Здесь:

• Сетка (grid-cols-1 → 2 → 3) управляется глобально.
• Карточка внутри — контейнер: если она шире, то картинка и текст становятся в строку.

Пример 2. Текст + сетка

<section class="max-w-5xl mx-auto p-6">
  <h2 class="text-2xl font-bold text-center mb-8 lg:text-4xl">Наши услуги</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="@container bg-gray-50 p-6 rounded">
      <h3 class="text-lg font-semibold @md:text-xl">Веб-разработка</h3>
      <p class="text-gray-600 @md:text-gray-800">Создание адаптивных сайтов и приложений.</p>
    </div>
    <div class="@container bg-gray-50 p-6 rounded">
      <h3 class="text-lg font-semibold @md:text-xl">UI/UX дизайн</h3>
      <p class="text-gray-600 @md:text-gray-800">Разработка удобных интерфейсов.</p>
    </div>
  </div>
</section>

Заголовок секции (h2) масштабируется глобально, а карточки внутри меняют шрифт и цвет текста локально.

Пример 3. Гибридная галерея

<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="@container bg-white p-2 rounded shadow">
    <img src="img1.jpg" class="w-full h-32 object-cover rounded mb-2">
    <p class="text-sm @md:text-base">Описание картинки</p>
  </div>
</div>

Глобально управляется количество колонок, а внутри карточки подпись увеличивается, если сама карточка стала шире.

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

• Только брейкпоинты — если решается структура всей страницы: колонки, сайдбар, сетка.
• Только контейнеры — если компонент нужно переиспользовать и он должен быть «умным» сам по себе.
• Комбинация — лучший вариант: глобальные правила для макета + локальная адаптивность для компонентов.

Упражнения ✍️

1. Сделай сетку из карточек: глобально (1 → 2 → 3 колонки), а внутри карточек картинка и текст перестраиваются при ширине контейнера.
2. Собери блок «Услуги»: заголовок увеличивается на lg:, внутри карточек текст становится темнее при @md.
3. Сделай галерею: количество колонок меняется по экрану, а подпись под фото увеличивается при @md контейнера.

Итог

Брейкпоинты управляют всей страницей. Контейнер-квери дают компонентам самостоятельность. Вместе они позволяют строить макеты, которые работают в любых условиях — от мобильного до десктопа, от узкой панели до широкой сетки.

👉 В следующей статье (#10) соберём полноценный мини-лендинг: хедер, hero-блок и карточки — используя flex, grid и контейнер-квери одновременно.