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!