Skip to content

Commit e9ce075

Browse files
committed
[css-grid] Make grid items size per 10.3.3 unless alignment says to use fit-content, consistent with cross-axis of flex items. Fix #394 per WG resolution.
1 parent 1ebab99 commit e9ce075

File tree

2 files changed

+13
-4
lines changed

2 files changed

+13
-4
lines changed

css-align/Overview.bs

+3
Original file line numberDiff line numberDiff line change
@@ -870,6 +870,9 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
870870
while still respecting the constraints imposed by 'min-height'/'min-width'/'max-height'/'max-width'.
871871
Unless otherwise specified, this value falls back to ''flex-start''.
872872

873+
All other values cause a 'width'/'height' of ''width/auto''
874+
to be treated as ''fit-content''.
875+
873876
Issue: Should ''justify-self/stretch'' allow a fallback alignment,
874877
like it does on 'align-content' and 'justify-content'?
875878

css-grid/Overview.bs

+10-4
Original file line numberDiff line numberDiff line change
@@ -1060,12 +1060,18 @@ Grid Items</h2>
10601060
Grid Item Sizing</h3>
10611061

10621062
A <a>grid item</a> is sized within the containing block defined by its <a>grid area</a>
1063-
similarly to an equivalent block-level box in an equivalently-sized containing block,
1064-
except that ''margin/auto'' margins and the <a>box alignment properties</a>
1065-
have special effects. (See [[#alignment]].)
1063+
using the 'width' calculation rules for non-replaced block boxes
1064+
as defined in <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1 &sect; 10.3.3</a>
1065+
(meaning ''width/auto'' values in either axis are
1066+
effectively sized to fill the remaining space).
1067+
However, the <a>box alignment properties</a> have special effects:
1068+
when 'align-self'/'justify-self' is neither ''justify-self/normal'' nor ''justify-self/stretch'',
1069+
an ''width/auto'' size for the <a>grid item</a> in that axis
1070+
is treated as ''width/fit-content'' instead of as the <a>fill-available size</a>.
1071+
See [[#alignment]].
10661072

10671073
Note: The ''min-width/auto'' value of 'min-width' and 'min-height'
1068-
behaves on <a>grid items</a> in the relevant axis
1074+
affects track sizing in the relevant axis
10691075
similar to the flexbox behavior on <a>flex items</a> in the <a>main axis</a>.
10701076
See [[#min-size-auto]].
10711077

0 commit comments

Comments
 (0)