CSS Container Query Generator
Налаштування container query
Live preview
Про 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.
Пов’язані гайди
Дізнайся workflow за цим інструментом і що перевіряти далі.
Technical SEO checks перед відправкою сайту
Фокусний checklist, щоб search engines могли знайти, просканувати, зрозуміти й проіндексувати важливі сторінки.
Як debug JSON API responses
Відформатуйте response, перевірте HTTP status, validate schema і порівняйте payload changes перед змінами в application code.
Приватність і використання
Швидкі перевірки без акаунта
Toolinix створений для коротких developer tasks: вставити безпечний приклад, перевірити результат, скопіювати потрібне й рухатися далі.
Без логіну
Інструменти можна використовувати без акаунта, підписки на розсилку або збереження робочого простору.
Локально, коли можливо
Форматери, генератори, енкодери та текстові утиліти зазвичай працюють у браузері. Network diagnostics можуть потребувати server-assisted lookup для перевірки публічних URL, доменів або IP.
Не вставляй секрети
Не вставляй production passwords, private keys, access tokens, дані клієнтів або regulated data в онлайн-інструменти, якщо це не дозволено твоєю security policy.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.