CSS Бесплатно, без регистрации

Генератор CSS Container Queries (@container)

Медиа-запросы @media видят только ширину всего окна браузера. Если карточка попадает в узкий сайдбар на мониторе 4K, @media ломает вёрстку, думая, что места много. Свойства container-type: inline-size и @container позволяют компоненту подстраиваться под контейнер в любом месте интерфейса.

Результат

Готовый CSS-код

/* 1. Valideyn konteyneri elan edirik */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 2. Kart öz konteynerinin eninə uyğunlaşır */
.card {
  display: flex;
  flex-direction: column;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
}

Как пользоваться

Перетаскивайте правый край контейнера мышкой или двигайте ползунок ширины, наблюдая за трансформацией карточки.
Переключайте готовые пресеты («Узкий сайдбар 260px», «Колонка ленты 420px», «Широкий баннер 580px»).
Следите за переключением точек перелома @container (min-width: 380px) и @container (min-width: 500px).
Скопируйте сгенерированный чистый CSS-код модульного компонента.

Как это работает

Почему Container Queries называют революцией в CSS?

Десятилетиями адаптивность строилась вокруг экрана устройства (@media). Но современный фронтенд модульный: интерфейс состоит из карточек, списков и виджетов. Один и тот же компонент может стоять в узкой боковой колонке (300px) или в центре экрана. @container делает компоненты по-настоящему независимыми и переносимыми.

Что означает container-type: inline-size?

Свойство container-type: inline-size регистрирует элемент как контекст контейнера по горизонтальной оси. Дочерние элементы могут проверять его ширину через @container (min-width: ...) без оглядки на размеры экрана пользователя.

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

@container card (min-width: 400px) {
  .card { display: flex; flex-direction: row; }
}

Новые контейнерные единицы: cqw и cqi

Спецификация ввела относительные единицы измерения: 1cqw равен 1% ширины контейнера, 1cqh — 1% высоты. Это позволяет создавать резиновые шрифты и отступы, которые масштабируются строго пропорционально карточке.

Частые вопросы

Поддерживается ли @container во всех браузерах?

Да, поддержка есть во всех браузерах: Chrome 105+, Safari 16+, Firefox 110+, Edge 105+ с начала 2023 года (охват более 92%).

Почему чаще используют inline-size, а не size?

Значение size требует фиксации высоты и ширины, что часто приводит к циклам перерасчета (layout loop). inline-size отслеживает только ширину, позволяя высоте блока свободно расти вместе с текстом.

Обязательно ли задавать container-name?

Не обязательно. Если имя не задано (container-type: inline-size), правило @container (min-width: ...) автоматически обратится к ближайшему родительскому контейнеру.

Эта тема в курсе HTML и CSS

Другие CSS-инструменты