This content originally appeared on Bram.us and was authored by Bramus!
Back in November 2020 is was announced that Chromium would experiment with Container Queries — then just a proposal and earlier this year (February 2021) adopted to become part of the CSS Containment Module Level 3 Specification. Just before the weekend a first version of this experimental implementation landed in Chrome Canary for us to play with (behind a flag). Let’s take it for a test drive …
?? The CSS features described in this post are still experimental and not finalized at all! If you’re feeling adventurous you can play with these new features today, but you’ll need at least Chromium 91.0.4459.0 with the #enable-container-queries flag enabled through chrome://flags.
~
Wanting to test Container Queries out I quickly threw a demo together using a classic card component. By default our component shows and image on top and a description below that. If enough space becomes available, they will be shown next to each other. Should even more space become available, then the image will grow even more.
In the recording below you can see the different layouts we want to achieve:
~
The markup of all those cards is the same and is pretty straightforward. Only extra thing I’ve added is an extra wrapper div .animalcard-wrapper so that our container queries will play nice when being used inside CSS Grid
<div class="animalcard-wrapper">
<div class="animalcard">
<div class="animalcard__image">
…
</div>
<div class="animalcard__description">
…
</div>
</div>
</div>The default layout of our card uses CSS Grid to position the image and the description:
/* SMALL LAYOUT: Image stacked on top of Description */
.animalcard {
display: grid;
grid-template: "image" "description" / 1fr;
gap: 1em;
padding: 1em;
}To now enable Container Queries, we need to create a Containment Context (Container Root) on the .animalcard-wrapper. We do this on the inline axis, so that we instruct the browser to keep an eye on its width.
/* Container Queries: Create Container Root */
.animalcard-wrapper {
contain: layout inline-size;
}With this Container Root in place, we can now add extra styles to apply when the Container Root reaches a certain width
/* MEDIUM LAYOUT: Image next to Description (1fr each) */
@container (min-width: 38rem) {
.animalcard {
gap: 2em;
padding: 2em;
grid-template: "image description" / 1fr 1fr;
}
.animalcard__description {
text-align: left;
}
}
/* LARGE LAYOUT: Large Image next to Description */
@container (min-width: 70rem) {
.animalcard {
grid-template-columns: 2fr 1fr;
}
}~
All together our demo finally becomes this:
See the Pen CSS Container Queries Demo by Bramus (@bramus) on CodePen.
?
☝️ If you’re looking for more demos, Miriam Suzanne is collecting a bunch in this CodePen Collection. Be sure to check out Una‘s Episode Card for The CSS Podcast
~
Thank me with a coffee.
I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-03-28T21:47:51+00:00) CSS Container Queries: A First Look + Demo. Retrieved from https://www.scien.cx/2021/03/28/css-container-queries-a-first-look-demo/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.