Container queries
A place to share all my demos on CQs
Progress
60%
You clicked 0 times. The light is broken!
You clicked 0 times. The light is broken!
You clicked 0 times. The light is broken!
Container queries
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023
A project card that shifts from a compact stacked style to a richer multi-column layout as container width increases.
.card-wrapper {
container: card / inline-size;
}
.card {
display: flex;
flex-direction: column;
}
@container card (min-width: 350px) {
.card {
flex-direction: row;
}
.card__thumb img {
width: 200px;
}
}Take a look at the demo below and resize the wrapper.
Full Screen