W3C home > Mailing lists > Public > www-style@w3.org > October 2010

Re: [css3-grid-align] -- proposed new grid layout module

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sun, 31 Oct 2010 09:14:53 -0700
Message-ID: <AANLkTikdCJuaOGBOMAgWMTP6Kn5-nZwUuYAFCuqNk5pR@mail.gmail.com>
To: Alex Mogilevsky <alexmog@microsoft.com>
Cc: "www-style@w3.org" <www-style@w3.org>
I like it!  Overall nearly equivalent functionality to Template.  I
like the addition of fr units.  The slider example is also very nice
for showing why overlapping elements is valuable.

Got a few questions/concerns:

1. When elements overlap, do you still see the overlapped elements
underneath (assuming a transparent background)?  I assume yes.

2. Is there a specific reason you used a different property for the
ordering, when it seems like it's identical to z-index?  Does the new
property not create a stacking context or something?

3. The draft, plus your clarification, make it clear how to treat
element children that aren't explicitly positioned.  Since you're
using the same auto-wrapping behavior that Flexbox uses, it's also
clear exactly how anonymous blocks are treated.  However, it's
impossible to target anonymous blocks to give them an explicit
position.  Template lets you specify where untargeted children go;
perhaps a property could be added giving a default position in the
grid?  Then the default values for grid-row and grid-column could be
'auto', which means 'consult the grid-default property'.

4. It appears that only children of the grid element can be aligned.
Is this true?

5. The fact that elements automatically overlap when positioned in the
same place is useful sometimes, but other times hurts the
source-independence of the module.  For example, if I have a blog with
two sidebars, I have to wrap all the sidebar sections in two container
elements and position the containers.  If I want to swap a section
from one sidebar to the other, I have to change it in the HTML.  In
Template, it's a simple matter of setting the section from
"position:slot(a);" to "position:slot(b);".  I'm not quite sure how to
address this lack, but see below.

6. I really like the scriptability-simplicity afforded by having the
grid-rows and grid-columns properties, but I'm still totally in love
with the immense *usability* afforded by Template's ascii art.  Being
able to grok a page layout by looking at a single property is
extremely valuable, I believe.  A template *is* fundamentally
compatible with Grid Alignment, so I think it would be great to pull
it in.

    There are two ways we could do this.  The first is to just pull in
the template itself, and leave row/column lengths to the grid-rows and
grid-columns properties.  The template itself is the most valuable
part of Template Layout - it is what provides the grokkability, and
produces the slot pseudos.  As well, the syntax for the row/col
lengths inside the template was always sorta clumsy.  Possible
mismatches between the rows/cols of the template and those specified
by grid-rows/columns are already handled by the "Implicit Columns and
Rows" section of the spec.

    The second way we could do this is to just import the full
template syntax, letting the row/col lengths specified in the template
override those of grid-rows/columns.  I think this is significantly
clumsier, and I don't think it's necessary.

    In either case, when a grid-template is used, its placement
behavior additionally becomes available.  You can place grid items
explicitly with grid-row/column, or flow them into a slot of the
template.  Additionally, if an @ slot is specified, grid items without
explicit positions will be flowed there instead of overlapping in the
default grid position.

    ::slot pseudos would act exactly like block children of the grid,
with appropriate values for grid-row/column/row-span/column-span by
default.  They should be completely unrestricted in what properties
and values they accept.

7. Grid Alignment suffers from the same 'display' problem that flexbox
does - it's impossible to make a table-cell be a flexbox or a grid.
Luckily, both flexbox and grid only care that their children are
block-level, so they work together nicely by default.


Overall, I think Grid Alignment can be a great successor to both
Template Layout and Grid Positioning.  Good job!

~TJ
Received on Sunday, 31 October 2010 16:15:49 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:33 GMT