8000 [css-grid] Rewrite grid-auto-flow somewhat to flow better. Minor chan… · w3c/csswg-drafts@3e12f29 · GitHub
Skip to content

Commit 3e12f29

Browse files
committed
[css-grid] Rewrite grid-auto-flow somewhat to flow better. Minor change to grid-auto-flow grammar to make it more sane, allowing 'dense' by itself without row/column.
1 parent d04d354 commit 3e12f29

2 files changed

Lines changed: 111 additions & 74 deletions

File tree

css-grid/Overview.bs

Lines changed: 37 additions & 19 deletions
< 10BC0 tr class="diff-line-row">
Original file line numberDiff line numberDiff line change
@@ -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.
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

Comments
 (0)