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

On Wed, Aug 8, 2012 at 8:36 AM, Phil Cupp <pcupp@microsoft.com> wrote:
> 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

Wait, you're mixing in unrelated topics here.  I'm not sure what the
safe-centering effect of margins has to do with the definition of the
'stretch' keyword in the alignment properties.

In any case, Grid's treatment of 'stretch' and treatment of auto
margins should ideally be identical to Flexbox's.  Anything else will
be an unnecessary source of confusion for developers.

That means that you should first figure out the width/height of the
box (you don't have flexibility to worry about here, luckily), then
resolve auto margins to take up the remaining space, then let the
alignment properties eat up any remaining space.

~TJ

Received on Wednesday, 8 August 2012 15:50:44 UTC