This is an idea of Jonathan Snook, an web designer and developer that I admire and follow.

He propose a new layout system on extending the CSS property “position” by adding value “:matrix (x,y)”. The Matrix Layouts should be like table-based layouts combined with absolute positioning and without any “hacks” for overflowing.

How this should work? You use the position property to specify where the box should be placed within the grid. Have a look at the following example diagram:

It’s a 3 column design but with a little extra pizzazz in the middle column. I’ve also lettered each section by their source order. Now, let’s look at what that code would look like with matrix layouts:

#a { position: matrix(1,2, 1,4); }
#b { position: matrix(2,2); }
#c { position: matrix(2,3); }
#d { position: matrix(2,4); }
#e { position: matrix(1,1, 2,1); }
#f { position: matrix(1,5, 2,5); }

I think this be a kick-ass CSS feature and I would love to use in my layouts. This will bring so much fun to CSS work and I’m sure that others would love it, but there is long way till it’s really implemented. Also will be good to have the Matrix Layout implemented in a CSS framework.

You can read the full blog post here or the Matrix Layout concept here.