History of CSS Grid and CSS Flexbox

Since the release of WesBos CSS Grid in early 2018 found here twitter has been abuzz with reviews and enthusiastic. This has led to a few developers commencing comparisons between Flex and Grid Layouts due some of their similarities, with this comes the question ‘Should i really learn Grid since i already know Flex?’.

So my short answer to this question is Yes and if you want you can stop reading now however, it would be beneficial to give a few reasons why this is so. However, before we go into these it is important to lay a few foundations like the history of how these Layouts came into existence.

This article is the summary of two articles i researched on, they can be summarised as follows:

The Flexbox layout used today is very different what was first proposed, the CSS Working Group had proposed the idea of a Flex layout in 2008 publishing the first working draft in 2009 . This original specification was based on XUL , technology used by Firefox to produce UI designs. Unfortunately, according to Tab Atkins Jr who is often referred to as the main author of the flex layout and grid layout said this was woefully under specified. The layout algorithm was slow and between the two implementations, Webkit and Firefox, there were loads of divergent details. It also worked different across both implementations.

In 2011, Atkins came in and rewrote the the whole specification of flexbox. the main goal of his was to try and remove the dependencies on all crazy float/table/inline-block/etc hacks that he had to master as a web developer (Something that a lot of front-end developers had come accustomed to) with better browser support. The 2012 version of the Flexbox spec was put into W3C candidate recommendation.

When a spec is in candidate recommendation it is at a certain point in the spec’s lifetime in the W3C. This means the spec is stable, supported in browsers, tests are being written for it and there should not be a significant change from this version.

In 2013, Atkins re-wrote an editor’s draft in 2013 to accomodate some new specifications. The new version of the spec (2012 version/2013 editor’s draft) made a better factoring of Flexbox’s ability, tightened the algorithm, and increased Flexbox’s efficiency.

For CSS grid this was actually initially introduced by Microsoft with a proposal they submitted to the CSS Working Group. According to Dr. Bert Bos, who co-created CSS with Håkon Wium Lie who also sat on the Working Group, grid-based layouts have actually been on his mind for quite some time even before the draft. However, they were deemed to complex to implement, this however did not stop both creators bringing out some preliminary efforts. But none of these ever got shipped to any browsers despite enthusiasm for these offerings, Advanced Layout Module (2005) which later became Template Layout Module. With grid concepts being thrown at the foot of the CSS Working Group with some regularity, folks were hopeful one of them would stick eventually. Fortunately, one of them did with a Candidate Recommendation implemented 2016 with Tab Atkins Jr being the main author.

Next article i will be looking at the how the differ and if there are any benefits using one over the other.