Skip to content

Commit 7728a3d

Browse files
committed
[css-grid] Editorial - expand the min-size section to copy m.m. the Flexbox text, rather than just referencing it.
1 parent 80896f8 commit 7728a3d

File tree

1 file changed

+62
-18
lines changed

1 file changed

+62
-18
lines changed

css-grid-1/Overview.bs

+62-18
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Former editor: Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
2222
Former editor: Phil Cupp, Microsoft Corporation, pcupp@microsoft.com
2323
Issue Tracking: Disposition of Comments https://drafts.csswg.org/css-grid-1/issues
2424
Abstract: This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.
25-
Ignored Terms: containing block, <positive-integer>, <ident>, auto, grid-*-start, grid-*-end, flex factor, flex factors, block formatting context, grid-auto-position, min size property, max size property
25+
Ignored Terms: containing block, <positive-integer>, <ident>, auto, grid-*-start, grid-*-end, flex factor, flex factors, block formatting context, grid-auto-position
2626
Ignored Vars: A, B, C, size-contribution, track-sizes, extra-space
2727
Link Defaults: css21 (property) margin/min-height/max-height/min-width/max-width, css-align-3 (value) stretch/baseline, css-position-3 (property) left, css-position-3 (property) position, css-writing-modes-3 (dfn) start/end
2828
At Risk: application of grid placement to absolutely-positioned boxes
@@ -886,7 +886,7 @@ Establishing Grid Containers: the ''display/grid'' and ''inline-grid'' 'display'
886886
<h3 id='intrinsic-sizes'>
887887
Sizing Grid Containers</h3>
888888

889-
Note see [[!CSS3-SIZING]] for a definition of the terms in this section.
889+
Note see [[!CSS-SIZING-3]] for a definition of the terms in this section.
890890

891891
A <a>grid container</a> is sized
892892
using the rules of the formatting context in which it participates:
@@ -1237,28 +1237,72 @@ Z-axis Ordering: the 'z-index' property</h3>
12371237
Automatic Minimum Size of Grid Items</h3>
12381238

12391239
To provide a more reasonable default <a>minimum size</a> for <a>grid items</a>,
1240-
this specification defines
1241-
that the ''min-width/auto'' value of 'min-width'/'min-height'
1242-
also applies an <a>automatic minimum size</a>
1243-
in the specified axis
1244-
to <a>grid items</a> whose 'overflow' is ''overflow/visible''
1245-
and which span at least one <a>track</a> in that axis
1246-
whose <a>min track sizing function</a> is ''grid-template-rows/auto''.
1247-
1248-
The <a>automatic minimum size</a> for a <a>grid item</a> in a given dimension is
1249-
its <a spec="css-flexbox">specified size</a> if it exists,
1250-
otherwise its <a spec="css-flexbox">transferred size</a> if that exists,
1251-
else its <a spec="css-flexbox">content size</a>,
1252-
each as defined in [[!CSS-FLEXBOX-1]].
1240+
the used value of an <a>automatic minimum size</a> in a given axis
1241+
on a <a>grid item</a> whose 'overflow' is ''overflow/visible'' in that same axis
1242+
and that spans at least one <a>track</a> in that axis
1243+
whose <a>min track sizing function</a> is ''grid-template-rows/auto''
1244+
is a <dfn>content-based minimum size</dfn>;
1245+
the <a>automatic minimum size</a> is otherwise zero, as usual.
1246+
1247+
The <a>content-based minimum size</a> for a <a>grid item</a> in a given dimension is
1248+
its <a>specified size suggestion</a> if it exists,
1249+
otherwise its <a>transferred size suggestion</a> if that exists,
1250+
else its <a>content size suggestion</a>.
12531251
However, if the <a>grid item</a> spans only <a>grid tracks</a>
12541252
that have a <a lt="fixed sizing function">fixed</a> <a>max track sizing function</a>,
1255-
its <a>specified size</a> and <a>content size</a> in that dimension
1256-
(and the input to the <a>transferred size</a> in the other dimension)
1253+
its <a>specified size suggestion</a> and <a>content size suggestion</a> in that dimension
1254+
(and the input to the <a>transferred size suggestion</a> in the other dimension)
12571255
are further clamped to less than or equal to the <a>stretch fit</a>
12581256
the <a>grid area</a>’s size
1259-
(so as to prevent the <a>automatic minimum size</a>
1257+
(so as to prevent the <a>content-based minimum size</a>
12601258
from forcing overflow of its fixed-size grid area).
12611259

1260+
The <a>content size suggestion</a>, <a>specified size suggestion</a>, and <a>transferred size suggestion</a>
1261+
used in this calculation account for the relevant min/max/preferred size properties
1262+
so that the <a>content-based minimum size</a> does not interfere with any author-provided constraints,
1263+
and are defined below:
1264+
1265+
<dl>
1266+
<dt><dfn>specified size suggestion</dfn>
1267+
<dd>
1268+
If the item’s computed <a>preferred size property</a> in the relevant axis is <a>definite</a>,
1269+
then the <a>specified size suggestion</a> is that size
1270+
(clamped by the relevant <a>max size property</a> if it's <a>definite</a>).
1271+
It is otherwise undefined.
1272+
1273+
<dt><dfn>transferred size suggestion</dfn>
1274+
<dd>
1275+
If the item has an intrinsic aspect ratio
1276+
and its computed <a>preferred size property</a> in the opposite axis is <a>definite</a>,
1277+
then the <a>transferred size suggestion</a> is that size
1278+
(clamped by the opposite-axis <a lt="min size property">min and max size properties</a> if they are <a>definite</a>),
1279+
converted through the aspect ratio
1280+
and finally clamped by the same-axis <a>max size property</a> if it's definite.
1281+
It is otherwise undefined.
1282+
1283+
<dt><dfn>content size suggestion</dfn>
1284+
<dd>
1285+
The <a>content size suggestion</a> is
1286+
the <a>min-content size</a> in the relevant axis,
1287+
clamped, if it has an aspect ratio,
1288+
by any <a>definite</a> opposite-axis <a lt="min size property">min and max size properties</a>
1289+
converted through the aspect ratio,
1290+
and then further clamped by the same-axis <a>max size property</a>
1291+
if that is <a>definite</a>.
1292+
</dl>
1293+
1294+
For the purpose of calculating an intrinsic size of the box
1295+
(e.g. the box’s <a>min-content size</a>),
1296+
this value causes the box’s size in that axis to become indefinite
1297+
(even if e.g. its 'width' property specifies a <a>definite</a> size).
1298+
Note this means that percentages calculated against this size
1299+
will [=behave as auto=].
1300+
1301+
Nonetheless, although this may require an additional layout pass to re-resolve percentages in some cases,
1302+
this value
1303+
(like the ''min-content'', ''max-content'', and ''fit-content'' values defined in [[CSS-SIZING-3]])
1304+
does not prevent the resolution of percentage sizes within the item.
1305+
12621306
<div class="note" id="min-size-opt">
12631307
Note that while a content-based minimum size is often appropriate,
12641308
and helps prevent content from overlapping or spilling outside its container,

0 commit comments

Comments
 (0)