@@ -22,7 +22,7 @@ Former editor: Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
2222Former editor : Phil Cupp, Microsoft Corporation, pcupp@microsoft.com
2323Issue Tracking : Disposition of Comments https://drafts.csswg.org/css-grid-1/issues
2424Abstract : 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
2626Ignored Vars : A, B, C, size-contribution, track-sizes, extra-space
2727Link 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
2828At 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'>
887887Sizing 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>
12371237Automatic 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