CSS Grid – the holy grail of web layouts?

Written October 12, 2017 by Jeromy Condon

This week I’ve spent a bit of time sharpening skills and learning new techniques. Technologies on the web move quickly, but one must use caution in using brand new stuff in production websites, as browser support can be spotty. Today I’d like to explore the CSS grid specification.

Since the dawn of the web there has not been a CSS module designed specifically for two dimensional layout (alignment of components on an X and Y axis). Web developers have had to rely on non-semantic HTML tables for layout, or later CSS floats in order to produce any layout more complex than a linear single column page. CSS grid is here to finally change that.

At it’s core, the CSS grid specification aims to alleviate brittle layout problems, whilst keeping modern accessibility intact. With this we will finally be able to completely separate the presentational structure of a web application from the logical order of its underlying HTML markup. This opens up many possibilities for layouts that were not possible before without reliance on overly complex javascript or creative browser hacks.

Quick and dirty layout examples below. I have tried to recreate the same layout using as little HTML and CSS as possible for each while only being concerned with the layout technique for the sake of demonstration.

For the first example, let’s examine how a web page used to be put together, prior to the CSS floating technique. This is how most HTML emails are still put together today. Notice that the HTML markup is very complex, and it is difficult to discern any kind of logical structure by looking at the source code (I threw some comments in there to help out a bit). Also note that most of the styling code is inline with the HTML. This is terrible for maintainability, and equally bad for accessibility. Also, an HTML table layout is generally fixed-width, and does not scale to mobile devices very well, if at all. Thank goodness these days are well behind us. Behold, the HTML table layout:

Click HTML / CSS / RESULT buttons to toggle the views below.

See the Pen HTML Table Layout by Jeromy Condon

Websites were produced in this way for many years. As the complexity of web layouts increased, and the capability of web browsing software got better, web developers started migrating towards a CSS based layout structure, where the appearance of the website was separated from the actual structure of the markup. This separation of concerns allows for much better maintainability, as well as a much more logical structure to the underlying HTML code. Unfortunately, as with the HTML tables based layout, a lot of extra code is required to make it work. This layout also doesn’t address aligning of components vertically/horizontally very well and relies on creative CSS *hacks*. Without further ado, the floated CSS column layout:

See the Pen CSS Floated Layout by Jeromy Condon

Websites were produced this way for many years also, and are only now beginning to move past this layout strategy. The CSS float property was never intended to be a basis for website layout, and has many well documented limitations. With today’s varying devices and screen sizes, the web needs a robust, flexible, layout module that is able to adapt and scale without sacrificing logical and accessible HTML markup. Enter the CSS Grid specification and its partner, the Flexible Box Module. Now, rather than relying on hacks and creative CSS trickery we can define a presentational layer completely separate from the HTML markup. This produces websites that are much more accessible, robust, and maintainable.

See the Pen CSS GRID Layout by Jeromy Condon

Notice how much less code is required to produce the same layout with the new spec. Also take note of how much easier it is to read. From a development standpoint this reduction in code overhead translates directly to increased speed, maintainability, and responsiveness. Currently, the biggest holdout to using these technologies today is browser support. All of the most common browsers currently support this, with the notable exception of Microsoft INTERNET EXPLORER and EDGE. Currently, those browsers only support an older version of the syntax that is not 100% compatible with the W3C recommendation. Microsoft Edge should gain support for the new syntax once it is updated in the Fall Creators Update for Windows 10, due to be released October 17, 2017. Sadly, Internet Explorer is no longer being updated and will never gain this feature. Yet another reason to leave Internet Explorer behind.

Frankly, I’m pretty excited for the future of the web. Devices are getting more powerful, and the features available to use on the web are getting more robust. As developers explore and utilize these new tools, we’re bound to see increasingly creative and engaging layouts to benefit web users everywhere.

Additional Resources:

CSS Grid Layout on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Guide to Grid on CSS Tricks: https://css-tricks.com/snippets/css/complete-guide-grid/
Grid by Example: https://gridbyexample.com/learn/
2017 Grid Challenge: https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/