Transition to CSS Grid Layouts with a Solid Fallback Strategy

In the past, the problem that many developers have faced is using new layout techniques and browser APIs while maintaining support for older browsers.

With a few new additions to the CSS spec, it is now easier than ever to use the new layout features in production without too much hassle. One such feature is CSS Grid, a powerful new display property used to layout a page.

This isn't an intro to CSS Grid per se, but instead goes over a brief history of frontend layout and describes my approach to using CSS Grid in production, while also providing a sensible alternative to browsers who don't support it.

A Bit of History

When I first started development back in 2005, there were two different methods that were used to layout a design, floats and tables. Even back then, the latter was viewed as an unfavorable method due to the lack of semantic markup that was needed in order to achieve a columnar layout.

For years, using floats was the preferred method. Eventually, flexbox came along, but there were issues that initially impeded its adoption.

What Went Wrong with the Rollout of Flexbox?

When the flexbox spec was being worked on, browser release cycles were longer, and support for the latest features was slower to make it to the general public. The side effect of the slow release cycles was that there were browsers with significant usage that did not support flexbox for years after its creation.

There was also a major syntax change that was introduced in the working draft, which didn't give me the assurance I needed in order to be able to use it in production for a major project for a number of years. Granted, there was a polyfill that came along to provide support for legacy browsers, but I was worried about additional changes down the line.

The Current Landscape

Browser Usage and Release Cycles

First off, the major browsers have largely adopted the rapid release schedule popularized by Chrome, so new features are quicker to make it into browsers.

In addition, Internet Explorer is dying a slow and painful death. IE11 is the last of the Microsoft browsers under the IE moniker that still has meaninful usage.

Browser Rendering Engines

Browser rendering engines have improved dramatically, and there really only 3 different rendering engines who can expect significant market share going forward, barring any new players or major developments.

Recently, MS Edge switched to the Blink rendering engine, which is also used by Chrome and Opera. Mozilla Firefox uses the Gecko rendering engine, and Safari uses Webkit.

Due to the the consistency between these rendering engines, I spend much less time chasing down issues during cross-browser testing than I did in years past, meaning I can afford to devote more time to the initial development and fine tuning fallback strategies for legacy browsers.

@supports

Along with the introduction of CSS Grid, there is also a new type of query called a feature query (@supports), and that is really where the magic happens. In the past, developers have had to rely on feature detection in JavaScript by using libraries like Modernizr. This was true even for CSS rules, and while Modernizr is great for some things, relying on JavaScript for CSS outside of things like React components always felt like a bit of a compromise to me.

With the introduction of @supports, browsers have a native way of feature detection that is built into CSS. The syntax for checking to see if the browser supports grid looks like this:

@supports (display: grid) {
  /** 
   * Code for browsers that support display: grid goes here. 
   *
   * If a browser does not have support for either the @supports feature
   * query or display: grid, this block will be ignored entirely.
   */
}

What Do You Need to Know to Use it in Production?

There are two things that I think are really important to know when trying to use a CSS Grid layout right now.

  • Every browser that supports display: grid also has @supports feature query support.
  • If an element has display: grid and a float property, the float is ignored in browsers that support display: grid.

What this means is that you can write a layout with floats or flexbox for older browsers and give the newer browsers the CSS Grid syntax.

Real World Example

Lets take a look at a typical example where we want to have a 2 column layout on small screens and a 3 column layout on larger screens. We'll use flexbox as the "default" layout and progressively enhance it with CSS Grid.

This layout should be visually identical in browsers that support CSS Grid, as well as those that do not.

Conclusion

CSS Grid is the most powerful layout tool that has been created to date. One day in the future, we'll be able to use CSS Grid directly without a feature query or fallback strategy, but for now, I suggest building new page layouts this way.

I personally have been using this technique on high traffic sites for my full time employer, and I can attest to its effectiveness.