css container-queries responsive modern-css
CSS Container Queries
Media queries respond to the viewport. Container queries respond to the parent container. This is huge for component-based design.
A card component can now adapt its layout based on where it's placed—sidebar, main content, or full-width—without knowing anything about the page layout.
css
/* Define a container */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* Style based on container width */
@container card (min-width: 400px) {
.card {
display: flex;
gap: 1rem;
}
}
@container card (max-width: 399px) {
.card {
display: block;
}
}