Over a million developers have joined DZone.

CSS Grid Layout is Coming to Firefox in 2012

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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:

  1. CSS Grid Positioning Module Level 3” (5 September 2007)
  2. Grid Layout” (22 March 2012)
  3. 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:
  • 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 the image: “CSS Grid Layout”]


  1. CSS3 Grid Layout is perfect for webapp GUIs
  2. A Windows 8 keynote review by a JavaScript programmer and Apple user

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Axel Rauschmayer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}