CSS Container Queries (@container) Generator
Classic @media queries only know the full browser viewport. Placing a card in a narrow sidebar on an ultrawide monitor breaks layout because @media assumes massive screen real estate. With container-type: inline-size and @container, components respond directly to their allocated space anywhere in the UI.
/* 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;
}
}How to use it
- Drag the right handle of the interactive preview (or use the width slider) to watch the card adapt its internal layout in real time.
- Switch between presets: 'Narrow Sidebar (260px)', 'Feed Column (420px)', or 'Wide Section (580px)'.
- Watch breakpoints toggle automatically when container width crosses 380px and 500px thresholds.
- Copy the production-ready modular
@containerCSS code.
How it works
Why Container Queries revolutionizes responsive web design
For decades responsive design was tied strictly to viewport width (@media). But modern web apps are built with modular design systems. The exact same card widget might live in a tight 300px sidebar or an 800px main column. @container decouples components from page viewport dimensions entirely.
How container-type: inline-size works
container-type: inline-size declares an element as a query container along its inline (horizontal) axis. Child elements query the parent's actual render width using @container (min-width: ...).
.widget-parent {
container-type: inline-size;
container-name: widget;
}
@container widget (min-width: 400px) {
.widget { display: flex; flex-direction: row; }
}Container Query Units: cqw and cqi
Container queries introduce container relative units: 1cqw is 1% of the container's width, while 1cqi is 1% of the container's inline size. Typography and padding can scale fluidly with component footprint rather than viewport width.
FAQ
What is browser support for Container Queries?
Fully supported across all major browsers (Chrome 105+, Safari 16+, Firefox 110+, Edge 105+) since early 2023 with over 92% global coverage.
Why is inline-size preferred over size?
size monitors both width and height, creating cyclic dependency risks where children increase height and alter parent size. inline-size monitors width only, allowing vertical content to expand safely.
Is container-name mandatory?
No. When omitted, @container (min-width: ...) automatically queries the nearest ancestor with an active container-type.
