W3C home > Mailing lists > Public > www-style@w3.org > May 2011

RE: [css3-grid] Question about grid cell creation

From: Phil Cupp <pcupp@microsoft.com>
Date: Sat, 14 May 2011 08:40:39 +0000
To: David Hyatt <hyatt@apple.com>, "www-style@w3.org CSS" <www-style@w3.org>
Message-ID: <26AA92D3A047B64C8F326A0BF9EB17FA33C2ADF2@TK5EX14MBXC136.redmond.corp.microsoft.com>
(1) Your example creates two different Grid Cells that occupy the same space
(2) I would prefer that Grid Cells only define space for Grid Items.  Only the properties: grid-row, grid-column, and grid-cell-stacking would apply
(3) I think this is not applicable given the answer to (2)
(4) #item1 is in its own anonymous Grid Cell.  The Grid Cell does not impact the paint order of the Grid Item.  The paint order is determined as described below (more needs to be written in the spec about this).
(5) Grid Items only share the same Grid Cell when they have a grid-cell property that refers by name to the same explicitly defined Grid Cell.

/* Explicitly define a Grid Cell "one" and put .itemA and .itemB into it.*/
::grid-cell("one") { grid-row: 1; grid-column: 1 }
.itemA { grid-cell: "one" }
.itemB { grid-cell: "one" }

More about (4):
Grid Items form a Partial Stacking Context.  I'm not sure if that term is in common use so I'll define it as the type of Stacking Context established by floats or positioned items having a z-index of 'auto'.  A float forms a new Stacking Context, but won't act as the parent Stacking Context for any of its descendants which also form new Stacking Contexts of their own.  In practical terms, having the Grid Item form a Partial Stacking Context means that each Grid Item draws atomically so that its backgrounds/borders and text won't be interleaved with other Grid Items when they intersect each other, and also that any positioned descendants aren't "trapped" in the Grid Item.

You might ask why should Grid Items draw atomically and get some special treatment?  My assumption has been that it will be common to use the Grid to layer elements when constructing controls.  Also it's been my experience that authors are surprised when they get interleaving behavior due to something like negative margins.  Now we are giving authors a tool that allows explicit positioning of elements using a coordinate system established by the Grid's Lines.  It seems natural in my opinion that like positioned elements, Grid Items should draw atomically.

I also want an author to have a mechanism to control the paint order of Grid Items that is independent of their source order.  This is the purpose of the grid-layer property.  Unlike z-index, grid-layer is just establishing a value with which to sort the Grid's Items for the purposes of painting.  Assigning a Grid Item a negative grid-layer does not cause the Grid Item to draw before the Grid Element's background.

Let me know if that is making any sense.

Thanks, Phil

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of David Hyatt
Sent: Friday, May 13, 2011 1:47 PM
To: www-style@w3.org CSS
Subject: [css3-grid] Question about grid cell creation

I'm very confused about how grid cell creation works.  I understand that cells can be created both anonymously and explicitly.

(1) If I create two explicit cells in the same row/column, are they the same cell or two different cells placed on top of one another?

::grid-cell("one") { grid-row: 1; grid-column: 1 }
::grid-cell("two") { grid-row: 1; grid-column: 1 }

If they are two distinct cells do you consider the content of all of these cells when sizing a column to min-content/max-content, etc.?

(2) Can explicit grid cells specify properties like backgrounds or do they only respect grid-row and grid-column?  For example are rules like these possible?

::grid-cell("one") { background-color: blue }


::grid-cell("two") { border:10px solid black }

(3) If grid cells are capable of painting backgrounds or borders, what is the expected order for cell painting?  Explicit grid cells come from CSS stylesheets and so there is no document order to rely on.  It's not clear to me what the paint order should be.

(4) If multiple cells occupy the same position, then how do you know which one to use?

::gridcell("one") { grid-row: 1; grid-column: 1 }
::gridcell("two") { grid-row: 1; grid-column: 1 }
#item1 { grid-row:1; grid-column: 1 }

Does #item1 end up inside one of the explicit grid cells, or are anonymous grid cells created independently without looking at explicit cells?  If the answer is that a new anonymous cell gets created, again, I'm confused about paint order relative to the other cells that might occupy the same position.

(5) How does coalescing of items in anonymous cells work?  Do items only share the same grid cell as long as their starting and ending lines match in both the row and column direction?

Received on Saturday, 14 May 2011 08:41:09 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:46 UTC