[css3-gridalign] Flowing versus overlapping

Right now, Grid Alignment's model doesn't allow multiple items to flow
together into the same cell.  If two items have the same grid
position, they simply overlap.  This is useful and definitely what you
want in some circumstances (the slider example showed off a good
example), but not in all circumstances.  Sometimes, you instead want
to be able to position multiple items into a cell, and have them flow
together as if they were siblings.

For example, say you have a blog with multiple sidebar items - a
search, recent posts, introduction, contact info, quote of the day,
blogroll, etc.

Now, assume that at some screen width you want to present a two-column
layout, with the blog on the left and the sidebar items stacked on the
right.  This is easy enough - if you just wrap all the sidebars in a
container, you can then position this container in the grid and it
works fine.

But say you want to present a three-column layout on wider screens,
with the blog on the left and two columns of sidebar items to the
right.  It's still *possible* to do this with the same structure as
the previous case, but it's less natural - you need to wrap the
sidebar items into *two* containers.  In the two-col case you have two
rows in the middle section, with a container in each, while in the
three-col case you just put one container in each column.

One more reasonable restriction, now.  Say that you consider some of
the sidebar items more important than others.  For example, your blog
search and recent posts are probably more important than your quote of
the day.  You always want the important items near the top of the
page.  In the two-col case, you want them in the first container,
while the less important things are in the second container.  In the
three-col case, you want them to be the top items in each container.
It is now impossible to use Grid Alignment, because there's no way to
change the ordering of sidebar items between the two containers.

Template could do this without a problem, because there were no
explicit containers; you just position the sidebar items within the
desired slot.  If necessary, one could then use, for example, Flexbox
Layout on the cell to control the display and layout within each
sidebar.

This ability is very useful, I believe.  I think it requires a similar
functionality to what Template allows, where a pseudoelement container
is created and positioned, and then items are flowed into that
container.

~TJ

Received on Tuesday, 2 November 2010 09:35:01 UTC