CSS Grid Layout is coming to Firefox in 2012

[2012-03-26] dev, firefox, webdev, layout

So far, HTML5 has been severely lacking when it comes to flexible GUI layouting. All that changed when Microsoft created CSS Grid Layout [1], which, among other things, is used to write the native HTML5 applications for Windows 8 [2]. That standard provides everything that people are familiar with from desktop GUI kits (such as Java SWT). Alas, so far, Microsoft was the only one who implemented this standard in a browser. Now that has changed: CSS Grid Layout will be added to Firefox in 2012 – as mentioned in section “CSS Flexbox and CSS Grid” of “Firefox in 2011 – Firefox plans for 2012” (by Robert Nyman for Mozilla Hacks).

In case you are wondering whether “CSS Grid” is the same as “CSS Grid Layout”, there are several similarly named specifications floating around, but they really are just different versions of the same standard:

“CSS Grid Positioning Module Level 3” (5 September 2007)
“Grid Layout” (22 March 2012)
W3C Editor’s Draft: “CSS Grid Layout” (22 March 2012)

As an additional tidbit, the Firefox Platform 2012 Roadmap mentions that Work on CSS Grid Layout will start after CSS Flexbox, which is slated to be finished by Q2 2012.

Example layout:

Explanations:

auto: assign a size so that the content fits comfortably.
minmax(min-content, 1fr): the minimum size is min-content (the smallest size that still allows the content to be shown); the maximum size is “1fr”, a fraction value indicating to assign 100% of the additional space that remains after all maximum sizes have been reached.

Note: there are no absolute units such as pixels.

[Source of image: “CSS Grid Layout”]