The BBC news site could in many ways be described as a bellwhether and a goal. It’s intensely gridded and is a pretty nice layout. Also, it’s very highly visited and needs to be compatible with everything. They’re not going to be abandoning tables soon. Still, the page could be used as a test case for new syntax.

One thing that occurs to me about any new kind of grid layout is that it needs to have a much more flexible approach to columns and rows. Obviously it wouldn’t be a grid if there wasn’t some kind of consistency in sizes between blocks, but when layouts get more complex the table author has to rely on increasingly more cunning configurations of colspan and rowspan in order to get the right sized blocks into the layout.

I have been thinking that a good system might be one where the author can define a basic grid, perhaps like this:

#g {
   display: grid;
   width: fit-viewport;
   height: fit-viewport;
   x-subdivisions: 3;
   y-subdivisions: 3;
}

And then define how blocks interact with that grid (gu = grid units):

#gc1 {
   display: grid-cell;
   top: 0;
   left: 0;
   width: 3gu;
   height: 1gu;
}
#gc2 {
display: grid-cell;
top: 1gu;
left: 0;
width: 3gu;
height: 2gu;
}

When applied to the following HTML:

<div id="g">
   <div id="gc1">
      Hi mum!
   </div>
   <div id="gc2">
      Look at my page!
   </div>
</div>

This stylesheet would provide a result similar to this table, filling the whole browser window:

Hi mum!

Look at my page!

It also occurred to me that it might be possible to write a simple transformation engine for CSS that takes my suggested syntax and renders it in current HTML+CSS as best it can. Ideally the HTML would not need to be rewritten and the CSS could be translated easily by mapping fluid values on to a specified frame size, in the same way that a browser would eventually anyway. This would be a valuable resource for testing and experimenting. Maybe it’s worth investigating SAC, but it might more useful just to implement it with REs.