@@ -22,7 +22,7 @@ Former editor: Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
22
22
Former editor : Phil Cupp, Microsoft Corporation, pcupp@microsoft.com
23
23
Issue Tracking : Disposition of Comments https://drafts.csswg.org/css-grid-1/issues
24
24
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
26
26
Ignored Vars : A, B, C, size-contribution, track-sizes, extra-space
27
27
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
28
28
At Risk : application of grid placement to absolutely-positioned boxes
@@ -886,7 +886,7 @@ Establishing Grid Containers: the ''display/grid'' and ''inline-grid'' 'display'
886
886
<h3 id='intrinsic-sizes'>
887
887
Sizing Grid Containers</h3>
888
888
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.
890
890
891
891
A <a>grid container</a> is sized
892
892
using the rules of the formatting context in which it participates:
@@ -1237,28 +1237,72 @@ Z-axis Ordering: the 'z-index' property</h3>
1237
1237
Automatic Minimum Size of Grid Items</h3>
1238
1238
1239
1239
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> .
1253
1251
However, if the <a>grid item</a> spans only <a>grid tracks</a>
1254
1252
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)
1257
1255
are further clamped to less than or equal to the <a>stretch fit</a>
1258
1256
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>
1260
1258
from forcing overflow of its fixed-size grid area).
1261
1259
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
+
1262
1306
<div class="note" id="min-size-opt">
1263
1307
Note that while a content-based minimum size is often appropriate,
1264
1308
and helps prevent content from overlapping or spilling outside its container,
0 commit comments