Контейнерные запросы в Elementor: адаптивность без привязки к брейкпоинтам

Что такое container queries и чем они отличаются от media queries

Media query проверяет характеристики viewport: ширину окна браузера, ориентацию экрана или разрешение. Например, правило `@media (max-width: 768px)` сработает на узком экране независимо от того, сколько места фактически получает конкретная карточка.

Container query проверяет размер определённого контейнера. Поэтому один и тот же компонент может иметь компактный вид в сайдбаре и развёрнутый вид в широкой секции, даже если страница открыта на одном и том же мониторе.

Это не означает полного отказа от брейкпоинтов. Media queries по-прежнему полезны для глобальной сетки, навигации и общих отступов. Container queries лучше подходят для автономных повторно используемых компонентов.

• media queries ориентируются на viewport;
• container queries ориентируются на ширину родительского контейнера;
• компонент становится более независимым от места, в котором он размещён;
• одни и те же стили можно повторно использовать в разных секциях страницы.

Подготовка структуры в Elementor

Для примера создадим родительский контейнер, внутри которого размещена карточка товара или другой повторно используемый компонент. Родительский элемент будет определять доступную ширину, а внутренняя карточка — реагировать на неё.

В Elementor добавьте родительскому контейнеру CSS-класс `card-area`. Внутреннему элементу карточки, которому нужна адаптивная логика, добавьте класс `product-card`. Класс нужно указывать без точки: точка используется уже в CSS-селекторе.

Если на странице есть несколько независимых областей с карточками, у каждой из них может быть собственный контейнер `card-area`. Это позволит компонентам реагировать на свою ширину, а не на ширину всей страницы.

• родительский контейнер: `card-area`;
• внутренняя карточка: `product-card`;
• убедитесь, что карточка действительно является потомком контейнера, а не соседним элементом;
• если CSS добавляется через Elementor, убедитесь, что в вашей конфигурации доступно поле Custom CSS; при необходимости разместите правило в глобальных стилях темы или другом подключённом CSS-файле.

Базовая настройка контейнерного запроса

Сначала нужно объявить родительский элемент контейнером для запросов. Для адаптации по горизонтальной ширине используется `container-type: inline-size`. После этого браузер сможет проверять ширину `card-area` в правилах `@container`.

Затем задайте базовый вид карточки и измените его для узкого контейнера. В примере широкая карточка имеет две колонки, а при ширине контейнера до 520 пикселей переходит в одну колонку.

• значение `inline-size` ориентируется на размер в направлении строки, что соответствует горизонтальной ширине в обычном режиме письма;
• порог 520 пикселей является примером, а не универсальным стандартом;
• пороговое значение лучше определять по реальной ширине компонента и длине его содержимого.

.card-area {
  container-type: inline-size;
}

.product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
}

@container (max-width: 520px) {
  .product-card {
    grid-template-columns: 1fr;
  }
}

Как сделать запрос понятнее в сложной структуре

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

Для этого родительскому элементу добавляют `container-name`, а название указывают в правиле `@container`. Такой вариант упрощает чтение CSS и снижает риск того, что запрос случайно начнёт ориентироваться на другой вложенный контейнер.

• используйте название, если среди потомков есть несколько контейнеров;
• название контейнера должно совпадать в `container-name` и `@container`;
• не используйте слишком общие названия вроде `main`, если в проекте много независимых компонентов.

.card-area {
  container-type: inline-size;
  container-name: card-area;
}

@container card-area (max-width: 520px) {
  .product-card {
    grid-template-columns: 1fr;
  }
}

Примеры использования в Elementor

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

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

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

• карточки товаров в Loop Grid;
• блоки с изображением и текстом в сайдбаре;
• повторно используемые виджеты в шаблонах Elementor Theme Builder;
• компоненты, которые используются и на полной ширине, и внутри колонок;
• внутренние сетки с разным количеством колонок в зависимости от доступного пространства.

.card-area {
  container-type: inline-size;
}

.product-card__content {
  display: flex;
  align-items: center;
  gap: 20px;
}

@container (max-width: 420px) {
  .product-card__content {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .product-card__title {
    font-size: 1.15rem;
  }
}

Проверка и типичные ошибки

После добавления CSS проверьте страницу в адаптивном режиме Elementor, но не ограничивайтесь только изменением ширины viewport. Важно протестировать компоненты в реальном контексте: в колонке, сайдбаре, Loop Grid и внутри вложенных контейнеров.

Если правило не срабатывает, сначала проверьте структуру DOM и названия классов. Контейнерный запрос действует на потомков контейнера. Он не применяется к самому элементу-контейнеру так, как часто ожидают начинающие.

Также проверьте, не перекрывают ли новые правила стили Elementor, темы или плагинов. Не используйте `!important` без необходимости: сначала уточните селекторы и порядок подключения стилей.

• класс указан с ошибкой или с точкой в поле Elementor;
• в CSS используется `.card-area`, но класс назначен не родительскому контейнеру;
• карточка не является потомком контейнера;
• запрос проверяет другой, более близкий вложенный контейнер;
• у карточки задана фиксированная ширина, которая не позволяет ей корректно сжиматься;
• в содержимом есть длинные слова, изображения или кнопки, которые переполняют узкий блок;
• кэш CSS не обновился после сохранения изменений.

Что именно нужно протестировать

Уменьшайте не только ширину окна браузера, но и ширину самой колонки, в которой размещена карточка. Отдельно проверьте граничные значения около 520 пикселей: переход должен происходить предсказуемо, без скачков и горизонтальной прокрутки.

Убедитесь, что на узкой ширине не обрезаются заголовки, цены, кнопки и изображения. После этого протестируйте страницу в актуальных браузерах и на реальных устройствах, поскольку редактор Elementor не всегда воспроизводит все особенности итогового шаблона.

Как сочетать container queries с адаптивными стилями Elementor

Не нужно переносить всю адаптивность сайта в container queries. Глобальные изменения — например, переход основной секции с четырёх колонок на две или изменение мобильного меню — логично оставить на уровне media queries и стандартных адаптивных настроек Elementor.

Container queries лучше использовать для внутренней логики компонента. Такое разделение упрощает поддержку: Elementor управляет общей композицией страницы, а CSS-компонент сам определяет, как вести себя в пределах полученного пространства.

Начните с одного компонента и нескольких понятных порогов. Слишком большое количество условий усложняет отладку и может привести к конфликтам между стандартными адаптивными стилями Elementor и собственным CSS.

• media queries — для структуры всей страницы;
• container queries — для карточек и автономных блоков;
• адаптивные настройки Elementor — для простых изменений, которые не требуют сложной логики;
• собственный CSS — для повторно используемых компонентов и точного контроля.