CSS Grid Layout is taking the web development community by storm

With the roll out of support in Microsoft's Edge on October 17, native CSS Grid Layout support is now available in all three major browsers. The excitement in the web development community to put this new CSS standard to use can't be understated. What had required learning one of several competing Javascript libraries that extended CSS functionality is now a built-in browser capability.

In the early days of web development, before the creation of CSS layout properties, web developers had used tables to place page elements onto a layout grid. It worked, but the HTML code was difficult to read or maintain and the layouts were not responsive. The community dropped the table layout technique when Javascript and CSS could be combined to create more complex and dynamic layouts. This had led to the problem of having several different open source Javascript libraries competing for developer attention. Making layout functionality a CSS standard supported by the web browsers brought simplicity back to layout development.

It wasn't an easy path to get here, however. The CSS Grid specification was the result of combining three different proposals: Microsoft's Grid Layout spec that had shipped with IE10, Bert Bos's Advanced Layout Module, and Peter Linss's proposal for grid lines. Microsoft's Grid Layout became the starting point because it was already a working tool in a browser. From that start, the draft specification was created by resolving the edge cases that resulted from combining the three models.

Getting to CSS Grid Layout 1.0, however, required implementations before the W3C Working Group was willing to put time into making the specification a reality. Microsoft had an implementation of their own proprietary Grid Layout, but they weren't ready to update it given that it hadn't been widely adopted. That was when Bloomberg stepped in and hired Igalia, an open source consultancy, to write the implementation for Blink and Webkit in 2013. Soon developers were creating layouts with the result. The rest is history as Chrome and Firefox released implementations early this year and finally Microsoft updated their own in October.