Y’know CSS was to kill off HTML table layout? Well, second time’s a charm: Meet CSS Grid

With the release of Safari 10.1 this week, four major browsers in the space of a month have implemented support for CSS Grid, an emerging standard for two-dimensional grid layouts in web applications.

For front-end web designers, this is a big deal. In a tweet, Eric Meyer, web development author and co-founder of An Event Apart, said, “Four browsers from four vendors rolled out Grid support in the space of four weeks. That’s just stunning. Never been anything like it.”

CSS Grid debuted on March 7 in Firefox 52, on March 9 (desktop) and March 27 (Android) for Chrome 57, on March 21 for Opera 44, and March 27 for Safari 10.1.

And one day after Meyer’s tweet, a fifth browser, Vivaldi added CSS Grid support.

When CSS Grid support landed in Firefox, web developer Rachel Andrew remarked, “A specification of this size has never landed like this before, shipping almost simultaneously in almost all of our browsers. It’s a shame that Edge decided not to join the party, that really would have been the icing on this particular interoperability cake.”

Why all the enthusiasm? Back in December, when CSS Grid surfaced in developer builds of Firefox, web designer Helen V. Holmes in a Mozilla blog post explained that CSS Grid has the potential to change the way layouts are done by making web app code less fragile, more streamlined, and easier to maintain.

“Grid allows users to decouple HTML from layout concerns, expressing those concerns exclusively in CSS,” she said. “It adapts to media queries and different contexts, making it a viable alternative to frameworks such as Twitter’s Bootstrap or Skeleton which rely on precise and tightly coupled class structure to define a content grid.”

CSS Flexible Boxes are often cited as an alternative approach, but flexbox layouts extend along a single-axis – think of a linear sequence of content containers – whereas CSS Grid layouts allow content to be aligned vertically and horizontally.

To demonstrate the efficiency of CSS Grid designs, web developer Dave Rupert recently refactored a 50 line flexbox grid into 5 lines of CSS code.

Mozilla designer advocate Jen Simmons has a website that demonstrates some layouts that CSS Grid make possible.

In a phone interview with The Register, Meyer attempted to explain the excitement. “I think honestly it’s the first time CSS has actually had a real layout system,” he said.

Meyer said he expects people will add CSS Grid support to layout frameworks like Bootstrap, “but it’s not really needed.”

Meyer observed that the arrival of CSS Grid in five browsers in the space of a month wasn’t accidental. “It’s because the browser makers have been working together,” he said. “There was such interest and such sharing that Jen Simmons has called it, ‘a new day in browser collaboration.’ It was a race where all the racers helped each other when they stumbled.”

Well, almost all. Microsoft, which proposed the initial specification several years ago, only supports an older version of the spec in its Edge and Internet Explorer browsers. It’s still limping along, trying to get to the finish line. So much for tech industry kumbaya. ®