# CSS Container Queries
Today I learned about CSS Container Queries, a powerful new feature that allows for more modular and reusable components in responsive design.
## The Problem with Media Queries
Traditional media queries are based on the viewport size, which means components can't adapt based on their own container's size. This makes it difficult to create truly reusable components that can adapt to different contexts.
## Enter Container Queries
Container queries solve this by allowing styles to be applied based on the size of a parent container rather than the viewport. This means a component can adapt its layout based on where it's placed in the UI.
## Implementation
To use container queries:
1. Define a containment context using the 'container-type' property
2. Use the '@container' rule to apply styles based on the container's size
This approach makes components much more portable and adaptable to different layout contexts.
Code Example
.container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}CSSResponsive Design