old-school 90s animated gif

Pardon my dust! I just migrated my website to the fantastic Eleventy and am recording the redesign process of adopting my design system for our AI & Design Systems course.

Brad Frost
Questioning Container Queries
Questioning Container Queries

I think what Paul Robert Lloyd is saying here is interesting, but I'm not sure it adds up to "we don't need container queries." His example shows what layouts are possible with grid and flexbox, all of which I think is awesome. These techniques reduce the need for a whole bunch of media queries, which again is fantastic. But I think the need for container queries still remains. Paul uses the following block pattern in his demo: This component is styled the same irrespective of its placement in the layout. But what if we as designers decided that we want to switch the component's styling to a horizontal format if there's enough space to, resulting in something like this: This is where I see container queries helping. In fact, I think Paul's post reinforces the need for container queries. Between flexbox, grid layout, subgrids, and more, we have more power over our layout containers than ever before. But manipulating components themselves based on context still feels a bit gross. It's worth pointing out that it may be possible to accomplish the above example using grid or some other method. I bet it is. But I'm wondering if doing it that way would be hacky or appropriate. I genuinely don't know. What I do know is that having a mechanism that says "if this component lives in a container that's at least X-wide, make these style changes" feels like it makes sense. These are good conversations to have, especially now that we have more layout tools at our disposal. So thanks Paul for making them happen! *[DETAILS]: Device, Environment, Time, Activity, Individual, Location, Social *[RESS]: Responsive Design with Server-Side Components *[CMS]: Content Management System *[GUI]: Graphical User Interface

Brad Frost Hey there! Brad Frost brad@bradfrost.com

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

Check out my courses AI & Design Systems course Atomic Design Certification Course Subatomic: The Complete Guide to Design Tokens course Get my newsletter

I like connecting with people directly without algorithms and machines getting in the way, and my newsletter helps me do that. Subscribe to get my latest thinking and interesting links about design, technology, music, art, creativity, and some random fun along the way.

Around the web