@@ -1492,7 +1492,7 @@ Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-colu
14921492
14931493 <pre class='propdef'>
14941494 Name : grid-auto-flow
1495- Value : [ row | column ] && dense? | stack && [ row | column ]?
1495+ Value : <<auto-flow-direction>> || <<auto-flow-algorithm>>
14961496 Initial : row
14971497 Applies to : <a>grid containers</a>
14981498 Inherited : no
@@ -1501,12 +1501,23 @@ Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-colu
15011501 Computed value : specified value
15021502 </pre>
15031503
1504+ <pre class=prod>
1505+ <dfn><<auto-flow-direction>></dfn> = row | column
1506+ <dfn><<auto-flow-algorithm>></dfn> = dense | stack
1507+ </pre>
1508+
15041509 <a>Grid items</a> that aren't explicitly placed are automatically placed
1505- into an unoccupied space in the <a>grid container</a> .
1506- The 'grid-auto-flow' property controls the direction in which the search for unoccupied space takes place,
1510+ into an unoccupied space in the <a>grid container</a>
1511+ by the <a>auto-placement algorithm</a> .
1512+ 'grid-auto-flow' controls how the <a>auto-placement algorithm</a> works,
1513+ specifying exactly how auto-placed items get flowed into the grid.
<
10BC0
tr class="diff-line-row">1514+ See [[#auto-placement-algo]] for details on precisely how the auto-placement algorithm works.
1515+
1516+ The <<auto-flow-direction>> determines what direction the search for unoccupied space takes place,
15071517 and whether rows or columns are added as needed to accommodate the content.
1518+ If this is omitted, it means the same as specifying ''grid-auto-flow/row'' .
15081519
1509- <dl dfn-for=grid-auto-flow dfn-type=value>
1520+ <dl dfn-for=" grid-auto-flow <auto-flow-direction> " dfn-type=value>
15101521 <dt> <dfn>row</dfn>
15111522 <dd>
15121523 The <a>auto-placement algorithm</a> places items
@@ -1518,33 +1529,40 @@ Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-colu
15181529 The <a>auto-placement algorithm</a> places items
15191530 by filling each column in turn,
15201531 adding new columns as necessary.
1532+ </dl>
1533+
1534+ The <<auto-flow-algorithm>> determines how the search for free space is conducted,
1535+ and where items are placed.
1536+ If omitted, it indicates that a “sparse” algorithm is to be used.
1537+
1538+ <dl dfn-for="grid-auto-flow <auto-flow-algorithm> " dfn-type=value>
1539+ <dt> omitted (“sparse”)
1540+ <dd>
1541+ If the <<auto-flow-algorithm>> is not specified,
1542+ the auto-placement algorithm uses a “sparse” packing algorithm.
1543+ It maintains a “cursor” that gradually moves through the grid,
1544+ looking for sufficiently large unoccupied areas to place each auto-placed <a>grid item</a> in turn.
1545+ It never returns to already-searched areas of the grid,
1546+ even if a large <a>grid item</a> causes the “cursor” to skip over areas
1547+ that would be large enough to fit smaller subsequent <a>grid items</a> .
1548+
1549+ Note: While this algorithm can possibly leave large “holes” in a grid,
1550+ it ensures that all of the auto-placed items appear “in order”,
1551+ regardless of the shape of the items and the grid.
15211552
15221553 <dt> <dfn>dense</dfn>
15231554 <dd>
1524- If specified, the auto-placement algorithm uses a " dense" packing algorithm,
1555+ If specified, the auto-placement algorithm uses a “ dense” packing algorithm,
15251556 which attempts to fill in holes in the grid if smaller items come up later.
1526- (By default, the auto-placement algorithm is "sparse",
1527- permanently skipping spaces that it can't fill with the current <a>grid item</a> .)
15281557
15291558 Note: This may cause items to appear out-of-order.
15301559
15311560 <dt> <dfn>stack</dfn>
15321561 <dd>
15331562 The auto-placement algorithm is run with a single hypothetical 1×1 grid item,
1534- as if ''grid-auto-flow: row'' or ''grid-auto-flow: column'' were specified,
1535- depending on whether ''row'' or ''column'' is specified alongside it,
1536- respectively.
1537- If neither ''row'' nor ''column'' are specified,
1538- it defaults to running the algorithm as if ''grid-auto-flow: row'' were specified.
1539-
1540- Wherever the hypothetical item would be placed,
1541- all auto-placed items are placed there,
1542- stacked atop one another.
1563+ and all of the auto-placed items are placed wherever that hypothetical item ends up.
15431564 (This happens even if the auto-placed item is greater than 1×1,
15441565 even if doing so would cause it to overlap explicitly-placed <a>grid items</a> .)
1545-
1546- Issue: Need to clarify what "placed there" means.
1547- (See the <a>auto-placement algorithm</a> for details.)
15481566 </dl>
15491567
15501568 Note: A future level of this module is expected to add a value that flows auto-positioned items together into a single “default” cell.
0 commit comments