[css3-gridalign] Named cells, intuitive creation of page grids

One of the most powerful parts of Template Layout was, in my opinion,
the ascii-art template that allowed the author to immediately *see*
what the page's layout would look like.  It was extremely intuitive
and simple, though it did tend to trigger a bit of backlash at first
sight, particularly from programmer types.  Most people warmed up to
it as soon as they actually tried to use it, though.

I believe this is fundamentally compatible with Grid Alignment.  All
that the template has to do is create slot pseudoelements, and
position them within the grid.  This works great within Grid
Alignment, where grid rows/columns can be defined, but elements can be
positioned outside of the defined rows/columns without problem - it
just creates new columns and rows explicitly.

So, for example, one could draw out a relatively simple layout like so:

body {
  grid-template: "abb"
                 "acc"
                 "d@e"
                 "dff";
}

This would automatically create a 4x3 grid and 7 ::slot() pseudos,
positioning them appropriately within the grid.

All of the rows and columns are "auto" length, though, which may be
suboptimal.  Using the other Grid Alignment properties, you can
provide more control here:

body {
  grid-template: "abb"
                 "acc"
                 "d@e"
                 "dff";
  grid-rows: 50px 70px 1fr auto;
  grid-columns: 200px 1fr min-content;
}

You now have two choices for positioning.  You can either flow items
into the ::slot() pseudos, or you can position items using
grid-position.  The two don't conflict at all - either are potentially
useful.  You could even extend the grid further by positioning items
outside the 4x3 grid already defined; the effects of this are
well-defined and predictable from the Grid Alignment spec.

~TJ

Received on Tuesday, 2 November 2010 09:52:51 UTC