Skip to main
Article
A back hoe on the bank of the Suez, trying to free the Ever Given cargo ship

Learn Grid Now, Container Queries Can Wait

Take your time with new CSS, but don’t sleep on the essentials

Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.

Learn CSS layout in-depth:

To learn more about grid and other CSS layout models, join our Online Smashing Workshop, October 2024.

Chris Coyier wrote about this recently over at Frontend Masters. As he (and several comments) mention, grid and flexbox make layout more responsive without the need for queries. That’s true! But looking at the numbers, I think we’re asking the wrong question.

Container (size) queries shipped in Firefox on February 14, 2023 – the last major browser to ship the feature. Chrome/Edge and Safari shipped a few months earlier, in the fall of 2022. CanIUse lists size queries support in 93.49% of all tracked browsers, with a Baseline status of Newly Available.

In contrast, Safari shipped CSS grid on March 27, 2017 – and Edge un-prefixed the feature on October 17 that same year. CanIUse lists grid support in 99.39% of all tracked browsers, with a Baseline status of Widely Available.

These are the two ‘stages’ of Baseline support, as described on Google’s web.dev:

Even in single-digits, 6% of the web is still a big difference in support.

Firefox was the first to support flexbox behind a prefix, and the last to un-prefix the feature on March 18, 2014. CanIUse shows flexbox support in 99.9% of all tracked browsers. Solidly in the wide support category for Baseline, but only a fraction more than grid support.

Chris links the Chrome usage counters for container queries. I’m warned these numbers are extremely unreliable – easily triggered by feature checks (e.g. Modernizr), unused code in third-party libraries, or popular outliers skewing the data – so take this with truckloads of salt. Here’s what I see:

The State of CSS survey attempts to measure how many web authors are using a feature. This is also suspect, but 26.7% of 2023 respondents ‘have used’ container queries). They didn’t have questions about grid and flexbox.

With popular tools like Bootstrap shipping flexbox-based grid systems, it’s not surprising to see it highly represented in the Chrome use counter. Maybe this data is meaningless. But anecdotally, it does seem like most developers are using flexbox, a few are also using grid, and everyone still has container queries on their to-do list once it has better support.

Container queries are basically brand new. But what’s going on with grids?

The CanIUse defaults are broken:

By default, CanIUse will show you % of all users, which is a very misleading number. Since nearly 3% of browsers are untracked, those support numbers will never go over 97% for new features. I recommend opening the CanIUse default display settings, and selecting All tracked users. You might also want to apply the ‘filtered’ view, to see only browsers with more than 0.5% usage by default.

As close observers of CSS we often overestimate how long these features have been around. Especially with newer features shipping every few months. Our scale is off!

You’re still talking about container queries?! That was before color mixing and selector nesting, last year! Try to keep up! If you’re not learning view transitions with anchor positions now, you’ll be left behind!

I get it. I’m in the CSS Working Group, regularly discussing features that won’t even become newly available for another year or three. At OddBird, we often work on internal tools for clients – building from scratch, with little need for legacy support.

I’ve been thinking about (and playing with) container queries for much longer than the baseline wide support 30 months. I wrote the specification, and started building demos in January 2021 (this demo is broken, since the syntax changed several times). But actual browser support is barely over half-way there – reaching 16 months next week.

This is still a very new feature, despite our hype cycles moving on.

Many developers are working in a context with much more conservative legacy support policies – often waiting for ‘full’ support of a new feature before they even consider using it in production.

In conversations, I especially hear concerns about browsers like iOS Safari that update more slowly, sometimes requiring a much heavier OS update. Safari on Mac may update in monthly-ish cycles, but users with an old phone are more often out-of-date.

Big sites are container ships that will get stuck in the Suez Canal during high winds, or decimate the Francis Scott Key bridge when there’s a power issue. These ships are not easy to maneuver. Sometimes they are maintaining essential resources for a long tail of users on older devices – sometimes they are weighed down by the sheer scale of their organization. Either way, it takes some time to change course.

But it’s not just the sites that are difficult to move. Developers can start sprinkling text-wrap: balance on headings with a 5-minute pull request, no matter how large the project. But Layout Systems are core features, and often rely on third-party tooling. It’s one thing to install new light fixtures, it’s another thing to replace the entire hull of a ship. Even with a smaller team, a smaller project, and a lighter browser-support matrix – it doesn’t make sense to re-write your code base or design system every time a new feature comes out.

We started phasing out Susy (our light-weight grid system) on OddBird projects in 2015. By 2017, we were recommending others do the same, and we officially deprecated the project on Jul 14, 2020. Four years later, OddBird.net/susy still has the highest traffic of anything on our site, and the susy package gets nearly 19k weekly downloads on npm.

There’s no rush to rip out all your media queries, and replace them with containers. You’ll be fine waiting for widely available support and your next scheduled re-factor.

But if you’re still avoiding grid – whatever your reasons – you are, in fact, missing out. CSS grid is one of the best features in CSS, and one of the biggest time-savers on every site we build.

I can imagine it’s hard to re-write a system built on flexbox. Flexbox is a great feature, and part of the web platform. What more do you need?

But flexbox is designed for content-out distribution, not system-wide page layouts. Using flexbox alone is like only using inline text, without paragraphs, divs, and other block elements. You’re using half the system, and it’s the more complicated half to manage.

At some point people looked at grid and thought “that looks complicated” – then spent nearly a decade over-complicating flexbox to compensate. People still rely on third-party grid systems like Bootstrap, because flexbox needs to be coerced into doing this job.

No! Stop. It’s time to learn grid. Right now. You might not think you need it, but you do. Set down container queries, and go learn grid.

Upcoming Workshop

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

Webmentions

Recent Articles

  1. A dog zooming by the camera, up-close, body twisted and eyes wide as it circles a grass yard
    Article post type

    Zoom, zoom, and zoom

    The three types of browser (and CSS!) magnification

    I’m working on an article about fluid typography, and relative units. But instead, I fell down this rabbit hole – or a cleverly-disguised trap? – trying to understand ‘zoom’ in the browser (not Zoom™️ the software). Since I couldn’t find any up-to-date articles on the subject, I thought I shoul…

    see all Article posts
  2. A rusty anchor hanging with the sea in the background.
    Article post type

    Updates to the Anchor Position Polyfill

    Catching up to the spec

    Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.

    see all Article posts
  3. A clear kitchen blender filled with chopped fruit and greens
    Article post type

    Can you un-mix a mixin?

    Rethinking the CSS mixin proposal after CSS Day

    The CSS Working Group has agreed to move forward with CSS-native mixins. But some recent mixin-like CSS tricks have an advantage that the official proposal doesn’t account for: they make it easy to remove a mixin after it’s already been mixed in.

    see all Article posts