Grid Layout comin’ to a Webkit near you

I heard on twitter from my homeboy Peter Beverloo¹ that Google are gonna start implementing CSS Grid Layout in Webkit. This is rad news for web devs, for a few reasons:

Firstly, CSS Grid Layout is just great. It’s a proposal from Microsoft on a new way to layout HTML components via CSS. See, one big problem with HTML/CSS over the years has been that the layout model was meant for documents, not for application UI. Document layout is pretty simple, you get a width as input, and then you lay words out in rows until you reach the end of a line. Then you go to the next line, and continue until you run out of words, at which point you get a height, and you can render a resulting box. Unfortunately, this doesn’t work at all for the layouts with buttons and widgets and columns and all the other crap that UIs have.

Web devs needed to find a way to build these kind of UIs on the web. The first way they did it was using HTML tables, because tables are pretty much perfect for building those kinds of UI. However, the problem was that HTML isn’t meant to be presentational, it’s meant to be “semantic”, where elements express the meaning of data rather than how it looks, and using tables for layout violates that principle. Presentation was meant to be controlled using CSS. However, CSS was originally created for styling documents, not laying out UI. It didn’t provide any obvious way to achieve equivalent results, nor was any such functionality forthcoming. Instead, web devs learned to abuse features such as margins, padding and (especially) floats to get the results they wanted. Later-on absolute positioning came along, which made things easier, but was still far from a silver bullet.

This difficulty lead to a schism in web development between those who build web sites using tables for layout. and those who use CSS. And it’s one that you still see see today, whenever people in blogs, forums, etc. discuss the topic of web development. A lot of developers, especially those who only do a bit of web development, really hate CSS. They don’t see any problem using tables for layout, and override objections with the argument that it is simply too awkward to try and build complex layouts with CSS. Most of these people aren’t building web sites for fortune 500 companies, more often just small firms and internal tools, but they’re still a sizeable group of vocally dissatisfied customers. Arguing back is usually an equal number of CSS apologists who are adamant that using tables for layout is an abhorrence, and that everything is easily achievable with CSS.

While I don’t use tables for layout, I do have sympathy with the former of the two groups. Building UIs with floats and margins is a horribly unnatural and unintuitive process, especially for the beginner. These features were never intended to be leveraged in this way, and in that respect it’s an abuse just as much as using tables for layout was. It’s also an approach that is practically impossible to build good visual tooling experience around. Something is badly wrong when doing things the “right” way is so difficult.

Some better means of laying out pages via CSS was badly needed, and for years the W3C worked on various half-assed proposals around adding columns and weird ASCII-art based templates, but nothing practical ever arrived in the browsers. Things weren’t helped of course by this being Internet Explorer’s wilderness years, where it was enjoying 90%+ market share and 0% development effort. However, while they were ignoring IE, Microsoft were building WPF and Silverlight, two closely related technologies that took a lot of inspiration from the web, while attempting to improve it. One such area of improvement was layout. In particular, they provided a grid layout container that could be used to lay out controls in rows and columns.

Finally, a couple of years ago, Microsoft started getting serious about the web again, and putting a lot more effort into improving IE and participating in the creation of web standards. They submitted a number of proposals to the W3C, and one such proposal was Grid Layout, essentially an adaption of the model they developed in WPF and Silverlight for HTML and CSS.

The key thing about Grid Layout is that the structure of the grid is not specified in markup. There are no <tr> and <td> elements containing things. Instead, there is just a container element of some kind, perhaps a <div>, and some other elements within it, and then the grid is specified through CSS properties that target the elements via their id.

While the grid layout is a major improvement on floats and margins for hand-coded layouts, its real strength is that it’s eminently toolable. It should finally be possible to build a visual design tool for HTML and CSS that is…

• Intuitive
• Powerful
• Round-tripping
• Produces clean and straightforward markup and CSS

Truly a promised land, eh? We’re not quite there yet, but the holy grail of easy layout for web UIs is within our grasp.

Microsoft themselves have already implemented Grid Layout and shipped it in previews of IE10, so it’ll be available on Windows 7 and Windows 8. There’s still the long tail of IE7-9 users to worry about, but at least there’s light at the end of the tunnel. Firefox doesn’t yet appearing to be working on support, although I expect they’ll try to get one in time for the Windows 8 release in order to stay competetitive, especially if webkit also has an implementation. There is a Firefox bug open here, voting on it can’t hurt.

¹He’s not really my homeboy, I don’t even know him.