Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Grid Layout is Coming to Firefox in 2012

DZone's Guide to

CSS Grid Layout is Coming to Firefox in 2012

· Web Dev Zone
Free Resource

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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:
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 the image: “ CSS Grid Layout”]

References

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

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

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.

SEE AN EXAMPLE
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.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}