CSS Container Query Generator
Налаштування container query
Container
Умова query
Target rule
Статус
Очікує
Live preview
Preview container
Content block
Цей блок змінюється, коли застосовується container rule.
Side block
Preview допомагає перевірити зміну layout.
Про CSS container queries
CSS container queries дозволяють компонентам реагувати на розмір батьківського контейнера, а не всього viewport. Це корисно для карток, панелей, віджетів, сайдбарів і повторно використовуваних компонентів.
Цей генератор створює і налаштування контейнера, і @container правило, щоб можна було швидко скопіювати готовий responsive pattern.
Як користуватися генератором
- Оберіть container type, зазвичай inline-size для layout, який залежить від ширини.
- Вкажіть container name, якщо потрібен named container query.
- Оберіть min-width, max-width, min-height або max-height умову.
- Введіть selector і CSS declaration, які мають застосовуватись всередині container query.
- Скопіюйте згенерований CSS у свій stylesheet.
Поради
- Використовуйте container queries, коли компонент має адаптуватися до доступного місця.
- Використовуйте media queries, коли зміна залежить від усього viewport.
- Named containers корисні, якщо всередині є кілька можливих query containers.
- Тримайте selector простим і локальним: .card, .panel або .product-card.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.
CSS Media Query Generator
Створюйте responsive CSS media queries для брейкпоінтів, орієнтації, dark mode, reduced motion і hover support.
Інші інструменти
›
CSS Grid Generator
Створюй CSS Grid layouts з колонками, рядками, відступами, вирівнюванням, live preview і готовим CSS.
Інші інструменти
›
CSS Flexbox Generator
Створюй CSS flexbox-розкладки з live preview, налаштуванням вирівнювання, напрямку, переносу, gap і готовим CSS для копіювання.
Інші інструменти
›
CSS генератор фонових патернів
Створюйте CSS-фони з крапками, сіткою, смугами, діагональними лініями та шаховим патерном.
Інші інструменти
›
CSS Container Query Generator FAQ
Що таке CSS container query?
Container query застосовує CSS залежно від розміру контейнера, а не від ширини браузера.
Коли використовувати container queries замість media queries?
Container queries краще підходять для reusable components, які мають адаптуватися в різних layout. Media queries краще для змін на рівні всієї сторінки.
Що означає container-type: inline-size?
Це вмикає query по inline axis, зазвичай по ширині контейнера в горизонтальному режимі письма.
Чи обовʼязково вказувати container-name?
Ні. Container name необовʼязковий, але корисний, коли потрібно звертатися саме до конкретного named container.