Grid Layout will soon be available in browsers. With it comes a classic conundrum – when can we use it?

As Grid very much defines what is possible in terms of CSS layout, it's likely that adoption will initially be a little slow, at least for existing sites. For newly created web properties, I'd advocate an ”aggresive enhancement” approach as soon as support is reasonably wide. What I mean by that is make your layout as simple as possible for simpler browsers (a single column, maybe some small flexbox, inline-block or float enhancements here and there), but bring out the Big Grid Guns when supported.

Using this strategy, you'd probably want to make sure that the code for the Grid-based layout is properly isolated. Something like this would be a good starting point:

@supports (display: grid) {
  /* KABOOM! */
}

Given this approach, you probably want your @media rules for the fancy responsive goodness inside the @supports rule. And this is all fine, according to the spec.

However, at the time of writing, Chrome does not respond dynamically to @media rules inside @supports rules – it reacts at page load, but not on window resize. Other browsers I’ve tested (Firefox, Safari) handle this just fine. Not a show stopper, but it got me scratching my head for a while. I’ve filed a bug and this has since been fixed – should be out in a version or two (52+?).

In conclusion, this will currently not be triggered correctly on window resize in Chrome:

@supports (display: grid) {
  @media (min-width: 65em) {
     /* ...sad trombone */
  }
}

...but this will:

@media (min-width: 65em) {
  @supports (display: grid) {
     /* ...mildly amused trombone */
  }
}

(If you're wondering about the title, it is a reference to the precursor to the World Wide Web, which Sir Tim called ENQUIRE, after a book called Enquire Within Upon Everything.)