[css3-grid-layout] grid-descendant grid items

=== Background / Use Case ===

In some recent discussions about merging the Template and Grid Layout
models, it was brought up that Grid Layout is currently only capable
of positioning immediate children of the grid element, whereas Template
Layout had the ability to pull descendants out of their flow and pop
them into the grid.

I'm sure there are cases where you'd want to reach in and pull out an
element into the grid, leaving the flow there intact. But Bert brought
up a very interesting example: imagine a form marked up as a list of
items, each with a label and an input, and suppose you want to format
it into a grid. In this case, you want each label and each input to
participate in the grid, even though the list item is the grid child.

You could solve this by pulling each label and each item out of the
list item's flow and into the grid. But then what happens to the list
item element? You could strip all its styles to make it invisible,
because it's now empty. But if you wanted to style it, say to put a
border around each label+input pair, what then?

Well, you could position the list item so that it takes up two grid
cells, and paints underneath the label and input. But if there's
borders or padding or margins on it, then you need to calculate that
total distance and apply it as margins to the appropriate sides of
the label input elements so that they look like they're inside it.

But that's all very awkward for expressing a relationship that's
already well enough expressed in the source. What you really want
is for the input and its label participate in the grid *while*
being inside the list item.

=== Proposal ===

Basically what's needed is a way for a grid item to itself be
a grid whose items in turn participate in its parent's grid.
Here's a (very rough) proposal:

   * Set the grid-span initial value to 'auto'. Have it generally
     compute to 1.
   * Define 'display: subgrid' to be an element that
      * itself is a grid element
      * determines its own number of rows and columns and uses
        that as its grid-span in its parent grid
      * has its items participate in the sizing of the parent grid

Then you can place items into a grid, either as auto-placed children
or as explicitly-placed descendants, and have their contents
participate in the grid. This allows aligning content within grid
items across the grid, as with the inputs and labels in the form
example Bert gave.

~fantasai

Received on Thursday, 9 August 2012 07:41:22 UTC