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

Hi,

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> ]


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.


Best regards,
  Rego

Received on Friday, 4 September 2015 15:24:18 UTC