RE: [css3-grid-layout] "stretch" value in grid-row/column-align is underspecified

I believe all three of these things should be in agreement about how to stretch a box:

1. Resolving the width and left/right margins of block-level boxes that "stretch" to touch the edges of their containing block
2. Resolving the cross size property and cross margins of a flex item such that its margin box stretches to touch the cross edges of its line
3. Resolving the width or height and margins of a grid item such that the box touches the edges of its grid cell (now calling this grid-area in most recent ED)

In each of these cases we satisfy the equation: 

margin_size1 + border_size1 + padding_size1 + box_size + padding_size2 + border_size2 + margin_size2 == space afforded to item by parent container

1. If box_size is auto then first we adjust it up or down to make the equation true while respecting any min/max constraints on the applicable dimension
2. If that isn't sufficient we do additional adjustments on margins
    a. If only one margin was auto we adjust that one to make the equation true
    b. If both of the margins were auto we take the additional space needed to make the equation true and divide it by 2 then assign it to each margin
    c. If neither margin is auto (the over-constrained case), we take the second margin (nearest the ending edge) and adjust it to make the equation true

When both margins are auto though, and the box is larger than the space afforded to it by its container, a paragraph of section 9.3 for css3-box [1] says: 

If ‘width’ is not ‘auto’ and ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + scrollbar width (if any) (plus any of ‘margin-left’ or ‘margin-right’ that are not ‘auto’) is larger than the width of the containing block, then any ‘auto’ values for ‘margin-left’ or ‘margin-right’ are, for the following rules, treated as zero. We should drop this paragraph. It causes blocks that are wider than their parent not to be centered (unlike blocks that are narrower), which looks strange.

While not called out in the current Grid Working Draft, IE's current implementation of Grid dropped that paragraph at the suggestion of its last two sentences so that items with auto margins that don't have auto width/height are always centered in the their grid cell.  Flexbox example 10 [2] shows that paragraph still in effect though.  My preference is the current Grid behavior, but we should resolve which is correct and make the behavior the same (at least between Grid and Flexbox).

[1] http://www.w3.org/TR/css3-box/#blockwidth

[2] http://dev.w3.org/csswg/css3-flexbox/#auto-margins


-Phil

-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Monday, August 6, 2012 12:09 PM
To: Phil Cupp
Cc: www-style list; Chris Jones; Markus Mielke; Alex Mogilevsky; Sylvain Galineau; fantasai (fantasai.lists@inkedblade.net)
Subject: Re: [css3-grid-layout] "stretch" value in grid-row/column-align is underspecified

On Mon, Aug 6, 2012 at 10:56 AM, Phil Cupp <pcupp@microsoft.com> wrote:
> Stretch can impact auto margins when width/height are not auto.  Also in the over-constrained case the ending margin is adjusted to make the grid item's box fit its grid cell.  Here is what we have in the current working draft [1] (note: please ignore section 8 of the current editor's draft, important bits were accidentally edited out in the last round of updates but will be restored shortly):
>
> Section 8.1
> A value of ‘stretch’ causes the Grid item’s width to shrink or grow in accordance with the equation for calculating block width described in section 9.3 of the CSS3 Box Model. Note that this calculation is symmetric for both the width and height of the Grid item.
>
> Section 9.3 of CSS3 Box [2] defines the sizing for block-level, non-replaced elements in normal flow when ‘overflow’ computes to ‘visible’, which I think is the behavior that both the grid and flexbox implement for stretching items.
>
> Let me know if you think more is needed and I'll open an issue in bugzilla.
>
> Also, should we centralize this definition?  Fantasai's alignment spec [3] has the following for defining align-self stretch which we could expand on: ‘stretch’ Sizes the box to exactly fit its containing block.

I'm not sure how it affects auto margins.  If the width/height are fixed, auto margins presumably shift it around in the box by themselves, regardless of what the alignment says.  At least, that's how we decided Flexbox should work, and it would be confusing to have Grid work in a different way.

~TJ

Received on Wednesday, 8 August 2012 15:37:48 UTC