Re: [css-align][css-grid] About stretch and justify|align-self|items properties

On Fri, Sep 4, 2015 at 8:23 AM, Manuel Rego Casasnovas <rego@igalia.com> wrote:
> first of all I think that the link in
> https://drafts.csswg.org/css-grid/#alignment for "stretch" definition is
> wrong:
>   " By default, grid items stretch to fill their grid area. However, if
>     justify-self or align-self compute to a value other than stretch
>     or margins are auto, grid items will auto-size to fit their
>     contents. "
>
> The link for "stretch" points to:
> https://drafts.csswg.org/css-align-3/#valdef-content-distribution-stretch
>
> However, it seems it should point to:
> https://drafts.csswg.org/css-align-3/#stretch
>
>
> Also it seems weird that the link for "stretch" in
> https://drafts.csswg.org/css-align-3/#align-self-property points to the
> flexbox spec instead of the previous link.
>
>
> In addition, I'm wondering why the "auto" and "stretch" keywords in
> https://drafts.csswg.org/css-align-3/#justify-self-property have
> different styles. It seems like "stretch" is not the same than "auto"
> for this property, when it's part of the valid values:
>   auto | stretch | <baseline-position> | [ <overflow-position>? &&
> <self-position> ]

All of these were a result of bad markup of the justify-self:stretch
keyword. That's been fixed, and now everything links correctly.

> Last, maybe it'd be nice to highlight in the specs that "stretch" can in
> some situations shrink the items :-), which somehow seems pretty weird.
>
> The example would be the following:
>   <div style="display: grid; grid: 50px / 50px; font: 100px/1 Ahem;">
>     <div style="border: 2px solid red; min-width: 0px; min-height:
> 0px;">X</div>
>   </div>
>
> By default ("stretch") item's size would be 50x50.
> But if we use "justify|align-self: start;" the item's size will be
> 100x100 (because of "grid items will auto-size to fit their contents"
> from the quote above).
> So "stretch" is somehow shrinking the item in this particular example.
>
> Notice that the "stretch" case with the default value for
> "min-width|height: auto;" will be 100x100 too.

Yeah, same behavior from Flexbox. Do you want a note or example or
something here?

~TJ

Received on Wednesday, 4 November 2015 21:02:10 UTC