Container Setup
Query Breakpoint
400px
Container Units
Container query units are relative to the container size, not the viewport.
Preview
300px
Container: 300px (query inactive)
Browser Support
Container queries are supported in Chrome 105+, Safari 16+, and Firefox 110+. Consider providing fallbacks for older browsers.
Generated CSS
/* Container Setup */
.card-container {
container-name: card;
container-type: inline-size;
}
/* Short-hand */
.card-container {
container: card / inline-size;
}
/* Container Query */
@container card (min-width: 400px) {
.card-content {
/* Styles when container is >= 400px */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}
/* Using Container Query Units */
.responsive-text {
font-size: clamp(1rem, 5cqw, 2rem);
}
.responsive-padding {
padding: 5cqw;
}