If you’re learning about container queries (anywhere), the chances are high that you’re going to come across demos that use a “card” element. It’s probably going to have an image, a header, and a paragraph. The image will be on top when the card is pretty narrow, and on the side when the card is pretty wide.
That’s OK. There tends to be a top-use-case for CSS features. I think of bottom navigation bars and fluid typography when I think of viewport units. I think of header navigation when I think of flexbox. I think of carousels when I think of the scroll-snap properties.
But a card element for container queries is even more perfect. As Dave always says, a card is just a little website. And container queries are just little scoped media queries (kinda).
Leave a Reply