Container queries в CSS: карточка по ширине контейнера, а не окна

Контейнерные запросы позволяют менять оформление компонента в зависимости от доступного ему места. Одна карточка может выглядеть по-разному в боковой колонке и в основном блоке при одинаковой ширине окна. Для запросов размера сначала задают контейнер через container-type.

На Mentoring.digital соберём учебную карточку материала. В узком блоке изображение стоит над текстом, в широком рядом с ним. Базовая вертикальная версия остаётся пригодной для чтения.

Контейнер снаружи, карточка внутри

<div class="card-slot">
  <article class="lesson-card">
    <img src="lesson.webp" alt="Учебные материалы на столе">
    <div>
      <h2>Практика с коллекциями</h2>
      <p>Небольшое задание и разбор типичных ошибок.</p>
    </div>
  </article>
</div>

Файл lesson.webp в примере нужно заменить своим существующим изображением и подходящим ALT. Обёртка отвечает за измерение, вложенная карточка за внешний вид. Размер элемента нельзя использовать таким запросом для изменения его же самого: требуется подходящий предок.

Базовые стили и условие ширины

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

.lesson-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #d8e1dc;
  border-radius: 1rem;
  overflow-wrap: anywhere;
}

.lesson-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@container lesson (min-width: 34rem) {
  .lesson-card {
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: center;
  }
}

inline-size включает проверку размера по строчной оси. В обычном горизонтальном режиме письма это ширина. Имя lesson позволяет явно выбрать нужный контейнер среди вложенных обёрток. Порог 34rem выбран для этого учебного макета; его следует подбирать по реальному содержимому.

Отличие от media query

Запрос @media (min-width: ...) ориентируется на характеристики среды, в обычной задаче адаптивной страницы на ширину области просмотра. @container в нашем примере ориентируется на родительский блок. Поэтому широкое окно не заставит карточку в узкой колонке перейти в горизонтальный вид.

Подходы можно сочетать: общий макет страницы меняется через media queries, а повторно используемый компонент через container queries. Не нужно переносить все правила проекта в новый механизм ради единообразия.

Если условие не срабатывает

• Проверьте, что container-type задан предку карточки, а не самой карточке.
• Сверьте container-name с именем в @container.
• Посмотрите фактическую ширину контейнера, а не только окна браузера.
• Проверьте поддержку в целевых браузерах и сохраните читаемые базовые стили.

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

Практику адаптивной вёрстки дают курсы frontend-разработки. Разобрать структуру контейнеров вашего интерфейса можно с наставником по frontend.