4 min read
•Question 41 of 49hardWhat are CSS Container Queries?
Understanding component-based responsive design.
What You'll Learn
- Container queries vs media queries
- Containment setup
- Usage examples
The Difference
| Query | Based On |
|---|---|
| @media | Viewport size |
| @container | Container size |
Setup
styles.cssCSS
/* Define container */
.card-container {
container-type: inline-size;
container-name: card;
}
/* Or shorthand */
.card-container {
container: card / inline-size;
}Query Syntax
styles.cssCSS
@container card (min-width: 400px) {
.card {
display: flex;
}
}
@container (min-width: 300px) {
/* Any ancestor container */
.content {
font-size: 1.2rem;
}
}Container Units
styles.cssCSS
.element {
font-size: 5cqw; /* 5% of container width */
padding: 2cqi; /* 2% of container inline size */
}