@@ -1546,7 +1546,7 @@ Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-colu
15461546
15471547 <pre class='propdef'>
15481548 Name : grid-auto-flow
1549- Value : <<auto-flow-direction>> || <<auto-flow-algorithm>>
1549+ Value : [ row | column ] || dense
15501550 Initial : row
15511551 Applies to : <a>grid containers</a>
15521552 Inherited : no
@@ -1555,68 +1555,40 @@ Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-colu
15551555 Computed value : specified value
15561556 </pre>
15571557
1558- <pre class=prod>
1559- <dfn><auto-flow-direction></dfn> = row | column
1560- <dfn><auto-flow-algorithm></dfn> = dense | stack
1561- </pre>
1562-
15631558 <a>Grid items</a> that aren't explicitly placed are automatically placed
15641559 into an unoccupied space in the <a>grid container</a>
15651560 by the <a>auto-placement algorithm</a> .
15661561 'grid-auto-flow' controls how the <a>auto-placement algorithm</a> works,
15671562 specifying exactly how auto-placed items get flowed into the grid.
15681563 See [[#auto-placement-algo]] for details on precisely how the auto-placement algorithm works.
15691564
1570- The <<auto-flow-direction>> determines what direction the search for unoccupied space takes place,
1571- and whether rows or columns are added as needed to accommodate the content.
1572- If this is omitted, it means the same as specifying ''grid-auto-flow/row'' .
1573-
1574- <dl dfn-for="grid-auto-flow <auto-flow-direction> " dfn-type=value>
1565+ <dl dfn-for="grid-auto-flow" dfn-type=value>
15751566 <dt> <dfn>row</dfn>
15761567 <dd>
15771568 The <a>auto-placement algorithm</a> places items
15781569 by filling each row in turn,
15791570 adding new rows as necessary.
1571+ If neither ''row'' nor ''column'' is provided,
1572+ ''row'' is assumed.
15801573
15811574 <dt> <dfn>column</dfn>
15821575 <dd>
15831576 The <a>auto-placement algorithm</a> places items
15841577 by filling each column in turn,
15851578 adding new columns as necessary.
1586- </dl>
1587-
1588- The <<auto-flow-algorithm>> determines how the search for free space is conducted,
1589- and where items are placed.
1590- If omitted, it indicates that a “sparse” algorithm is to be used.
1591-
1592- <dl dfn-for="grid-auto-flow <auto-flow-algorithm> " dfn-type=value>
1593- <dt> omitted (“sparse”)
1594- <dd>
1595- If the <<auto-flow-algorithm>> is not specified,
1596- the auto-placement algorithm uses a “sparse” packing algorithm.
1597- It maintains a “cursor” that gradually moves through the grid,
1598- looking for sufficiently large unoccupied areas to place each auto-placed <a>grid item</a> in turn.
1599- It never returns to already-searched areas of the grid,
1600- even if a large <a>grid item</a> causes the “cursor” to skip over areas
1601- that would be large enough to fit smaller subsequent <a>grid items</a> .
1602-
1603- Note: While this algorithm can possibly leave large “holes” in a grid,
1604- it ensures that all of the auto-placed items appear “in order”,
1605- regardless of the shape of the items and the grid.
16061579
16071580 <dt> <dfn>dense</dfn>
16081581 <dd>
1609- If specified, the auto-placement algorithm uses a “dense” packing algorithm,
1610- which attempts to fill in holes in the grid if smaller items come up later.
1611-
1612- Note: This may cause items to appear out-of-order.
1613-
1614- <dt> <dfn>stack</dfn>
1615- <dd>
1616- The auto-placement algorithm is run with a single hypothetical 1×1 grid item,
1617- and all of the auto-placed items are placed wherever that hypothetical item ends up.
1618- (This happens even if the auto-placed item is greater than 1×1,
1619- even if doing so would cause it to overlap explicitly-placed <a>grid items</a> .)
1582+ If specified, the <a>auto-placement algorithm</a> uses a “dense” packing algorithm,
1583+ which attempts to fill in holes earlier in the grid if smaller items come up later.
1584+ This may cause items to appear out-of-order,
1585+ when doing so would fill in holes left by larger items.
1586+
1587+ If omitted, a “sparse” algorithm is used,
1588+ where the placement algorithm only ever moves “forward” in the grid when placing items,
1589+ never backtracking to fill holes.
1590+ This ensures that all of the auto-placed items appear “in order”,
1591+ even if this leaves holes that could have been filled by later items.
16201592 </dl>
16211593
16221594 Note: A future level of this module is expected to add a value that flows auto-positioned items together into a single “default” cell.
@@ -2322,7 +2294,7 @@ Grid Item Placement Algorithm</h3>
23222294
23232295 To aid in clarity,
23242296 this algorithm is written with the assumption that 'grid-auto-flow'
2325- has an <<auto-flow-direction>> of ''grid-auto-flow/row'' .
2297+ has ''grid-auto-flow/row'' specified .
23262298 If it is instead set to ''grid-auto-flow/column'' ,
23272299 swap all mentions of rows and columns, inline and block, etc. in this algorithm.
23282300
@@ -2373,9 +2345,9 @@ Grid Item Placement Algorithm</h3>
23732345 specified as a pair of row and column <a>grid lines</a> .
23742346 Initially the <a>auto-placement cursor</a> at is specified with a row and column position both equal to 1.
23752347
2376- The << auto-flow-algorithm>> in use determines how to position the items:
2348+ The 'grid- auto-flow' value in use determines how to position the items:
23772349
2378- : omitted ( “sparse”)
2350+ : “sparse” packing (omitted ''dense'' keyword )
23792351 :: For each <a>grid item</a> that hasn't been positioned by the previous steps,
23802352 in <a>order-modified document order</a> :
23812353
@@ -2406,7 +2378,7 @@ Grid Item Placement Algorithm</h3>
24062378 set its column position to 1,
24072379 and return to the previous step.
24082380
2409- : ''grid-auto-flow/ dense''
2381+ : “dense” packing ( '' dense'' specified)
24102382 :: For each <a>grid item</a> that hasn't been positioned by the previous steps,
24112383 in <a>order-modified document order</a> :
24122384
@@ -2437,27 +2409,6 @@ Grid Item Placement Algorithm</h3>
24372409 set its column position to 1,
24382410 and return to the previous step.
24392411
2440- : ''grid-auto-flow/stack''
2441- :: Find the first unoccupied <a>grid cell</a> in the first row that contains an unoccupied <a>grid cell</a> .
2442- This is the <dfn>default stacking cell</dfn> .
2443- It is also the <dfn>default stacking cell for the column</dfn> that it is in.
2444-
2445- For each <a>grid item</a> that hasn't been positioned by the previous steps,
2446- in <a>order-modified document order</a> :
2447-
2448- : If the item has a <a>definite column position</a> :
2449- :: If the column corresponding to the item’s start-most column position
2450- does not yet have a <a>default stacking cell for the column</a> ,
2451- find the first row with an unoccupied cell in that column.
2452- That cell is now the <a>default stacking cell for the column</a> .
2453-
2454- Set the item's row-start and column-start line indexes
2455- to the column and row position of the <a title="default stacking cell for the column">default stacking cell for the start-most column of the item's position</a> .
2456-
2457- : If the item has an <a>automatic grid position</a> in both axes:
2458- :: Set the item's row-start and column-start line indexes
2459- to the column and row position of the <a>default stacking cell</a> .
2460-
24612412
24622413<h2 id='alignment'>
24632414Alignment</h2>
0 commit comments