CSS3 Grid Layout is perfect for webapp GUIs

[2011-01-18] dev, webdev, layout
(Ad, please don’t block)

Prior solutions

Previously in the realm of webapp GUI layouting:
  • There were a number of interesting proposals to adapt CSS layouting to the needs of GUI application developers. None of them really took off.
  • Some JavaScript framework authors took matters into their own hands and implemented surprisingly capable layout on top of traditional CSS. Others (such as Qooxdoo) perform layout calculations in JavaScript and recompute the layout every time they receive a resize event. That is not as smooth as relying on CSS, but leads to more capable solutions.
  • Palm presented Enyo, a framework that allows one to dynamically change layout depending on the size of the screen (think cell phone versus tablet).

Grid Layout

Now there is a new proposal out, by Microsoft. It is called Grid Layout. It has got everything one could wish for: Define a grid with flexible and fixed columns and rows, place your HTML elements on that grid, etc. It has the hitherto unavailable option to let content occupy the minimal space possible (e.g. vertically, in a horizontal toolbar at the top of a view). In current CSS-driven and JavaScript-driven solutions, you need to specify pixels as a work-around and that is a very fragile solution.

The only thing missing is the option to declare several columns (or rows) to have the same size. This is useful for the final button row in dialogs (“OK”, “Cancel”, ...) where all buttons should have the same size.

Related reading

  1. “JGoodies :: Forms”: Check out their whitepaper, very clear analysis of the issues that arise in GUI layouting.
  2. Update 2011-04-13: Internet Explorer 10 is good for webapp developers [IE10 supports Grid Layout]
  3. Update 2012-03-26: CSS Grid Layout is coming to Firefox in 2012