W3C home > Mailing lists > Public > www-style@w3.org > September 2015

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

From: Manuel Rego Casasnovas <rego@igalia.com>
Date: Fri, 04 Sep 2015 17:23:30 +0200
Message-ID: <55E9B772.6040601@igalia.com>
To: www-style@w3.org

first of all I think that the link in
https://drafts.csswg.org/css-grid/#alignment for "stretch" definition is
  " 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:

However, it seems it should point to:

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:

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,
Received on Friday, 4 September 2015 15:24:18 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:56 UTC