Steve Workman's Blog

CSS Matrix Layouts - Another Way?

Posted on by Steve Workman About 1 min reading time

Today, Jonathan Snook posted about CSS Matrix Layouts, a proposal for a third way for creating advanced layouts in CSS3, with Advanced Layouts and Grid Layouts being the others. His ideas are around creating a grid and defining sections (be it divs or natural HTML5 elements) that are effectively laid out like a table. Each section can span like a table can span rows and columns, with all those values being stored in CSS. Take a look at the post for an example, it's quite simple once you get your head around it.

I raised some concerns about generated columns, and how the grid might not know how to react, and also that adding columns is a bit of a headache in complex layouts, but is relatively minor compared to the benefits that it would bring. In general, there's a lot of support for the module. Hopefully we'll see a draft on www-style very soon.

Of course, this is just all new stuff and unlikely to be fast-tracked to CR status any time soon. However, this module is similar to the CSS Grid Layout module, and some of Snook's work could be very useful in that module. I'm going to investigate the working draft and if it looks like I can improve it, I might even have a go.