10000 [css-grid] Rewrite the grid placement algo to split apart the differe… · SoulUED/csswg-drafts@dc00d08 · GitHub
Skip to content

Commit dc00d08

Browse files
tabatkinstabatkins
committed
[css-grid] Rewrite the grid placement algo to split apart the different algo choices. Also reword a bit to make more sense, in terms of positioning and covered grid cells, rather than being (incorrectly) explicit about item edges.
1 parent c1e64d6 commit dc00d08

File tree

2 files changed

+165
-128
lines changed

2 files changed

+165
-128
lines changed

‎css-grid/Overview.bs‎

Lines changed: 72 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1714,17 +1714,26 @@ Grid Definition Shorthand: the 'grid' property</h2>
17141714
<h2 id="placement">
17151715
Placing Grid Items</h2>
17161716

1717-
A <a>grid item</a>’s <dfn export title="grid placement|placement">placement</dfn> consists of a <a>grid position</a> and a <a>grid span</a>:
1717+
Every <a>grid item</a> has a <a>grid area</a>,
1718+
a rectangular set of <a>grid cells</a> that the <a>grid item</a> occupies.
1719+
This <a>grid area</a> defines the <a>containing block</a> for the <a>grid item</a>
1720+
within which the alignment properties ('justify-self' and 'align-self') determine their actual position.
1721+
The cells that a <a>grid item</a> occupies also influence the sizing of the grid's rows and columns,
1722+
defined in [[#layout-algorithm]].
1723+
1724+
The location of a <a>grid item’s</a> <a>grid area</a> within the <a>grid</a>
1725+
is defined by its <dfn export title="grid placement" local-title="placement">placement</dfn>,
1726+
which consists of a <a>grid position</a> and a <a>grid span</a>:
17181727

17191728
<dl export>
1720-
<dt><dfn>grid position</dfn>
1729+
<dt><dfn export local-title="position|row position|column position">grid position</dfn>
17211730
<dd>
17221731
The <a>grid item</a>’s location in the <a>grid</a>.
17231732
A <a>grid position</a> can be either
17241733
<dfn export title="definite grid position|definite row position|definite column position|definite position">definite</dfn> (explicitly specified)
17251734
or <dfn export title="automatic grid position|automatic row position|automatic column position|automatic position">automatic</dfn> (determined by <a>auto-placement</a>).
17261735

1727-
<dt><dfn>grid span</dfn>
1736+
<dt><dfn export local-title="span|row span|column span">grid span</dfn>
17281737
<dd>
17291738
How many <a>grid tracks</a> the <a>grid item</a> occupies.
17301739
A <a>subgrid</a>’s <a>grid span</a> can be <dfn title="automatic grid span|automatic row span|automatic column span|automatic span">automatic</dfn>
@@ -1779,6 +1788,8 @@ Placing Grid Items</h2>
17791788
<td><a>Subgrid</a> without an explicit or implied span
17801789
</table>
17811790

1791+
1792+
17821793
<h3 id='common-uses'>
17831794
Common Patterns for Grid Placement</h3>
17841795

@@ -2233,53 +2244,53 @@ Absolutely-positioned Grid Items</h3>
22332244
<h3 id='auto-placement-algo'>
22342245
Grid Item Placement Algorithm</h3>
22352246

2236-
The following <dfn title="auto-placement algorithm|grid item placement algorithm">grid item placement algorithm</dfn>
2237-
assigns <a>grid items</a> to <a> 8000 grid cells</a>
2238-
such that all items in the <a>grid container</a>
2239-
are given a <a>definite grid position</a>.
2240-
It places first all explicitly-positioned items,
2241-
then items with automatic grid positions,
2242-
adding rows/columns as necessary
2243-
to contain all of the grid items.
2247+
The following <dfn export local-title="auto-placement algorithm">grid item placement algorithm</dfn>
2248+
resolves <a>automatic positions</a> of <a>grid items</a> into <a>definite positions</a>,
2249+
ensuring that every <a>grid item</a> has a well-defined <a>grid area</a> to lay out into.
2250+
(<a>Grid spans</a> need no special resolution;
2251+
if they're not explicitly specified,
2252+
they default to either 1 or,
2253+
for <a>subgrids</a>,
2254+
the size of their <a>explicit grid</a>.)
2255+
2256+
Note: This algorithm can result in the creation of new rows or columns in the <a>implicit grid</a>,
2257+
if there is no room in the <a>explicit grid</a> to place an auto-positioned <a>grid item</a>.
2258+
2259+
Every <a>grid cell</a>
2260+
(in both the <a title="explicit grid">explicit</a> and <a>implicit grids</a>)
2261+
can be <dfn>occupied</dfn> or <dfn>unoccupied</dfn>.
2262+
A cell is <a>occupied</a>
2263+
if it's covered by a <a>named grid area</a>,
2264+
or by the <a>grid area</a> of a <a>grid item</a> with a <a>definite grid position</a>;
2265+
otherwise,
2266+
the cell is <a>unoccupied</a>.
2267+
A cell's <a>occupied</a>/<a>unoccupied</a> status can change during this algorithm.
22442268

22452269
To aid in clarity,
22462270
this algorithm is written with the assumption that 'grid-auto-flow'
22472271
has an <<auto-flow-direction>> of ''grid-auto-flow/row''.
22482272
If it is instead set to ''grid-auto-flow/column'',
22492273
swap all mentions of rows and columns, inline and block, etc. in this algorithm.
22502274

2251-
For the purpose of this algorithm,
2252-
an <dfn>occupied grid cell</dfn>
2253-
is any <a>grid cell</a> which is contained within
2254-
any <a>named grid area</a>
2255-
or the <a>grid area</a> of any previously-positioned <a>grid item</a>.
2256-
2257-
1. <b>Position anything that's not auto-positioned.</b>
2258-
2259-
Before auto-positioning anything,
2260-
position every <a>grid item</a>
2261-
with a <a>definite grid position</a> in both axes.
2262-
2263-
2. <b>Process the items locked to a given row.</b>
2275+
1. <b>Process the items locked to a given row.</b>
22642276

22652277
For each <a>grid item</a> with a <a>definite row position</a>
22662278
(that is, the 'grid-row-start' and 'grid-row-end' properties define a <a>definite grid position</a>),
22672279
in <a>order-modified document order</a>,
2268-
position its <a>inline-start</a> edge
2280+
set the row-start line of its <a>placement</a>
22692281
to the earliest (smallest positive index) line index
2270-
that ensures this item’s <a>grid area</a> will not overlap any <a>occupied grid cells</a>.
2282+
that ensures this item’s <a>grid area</a> will not overlap any <a>occupied</a> grid cells.
22712283

2272-
3. <b>Determine the number of columns in the implicit grid.</b>
2284+
2. <b>Determine the number of columns in the implicit grid.</b>
22732285

22742286
Set the number of columns in the <a>implicit grid</a> to the larger of:
22752287

22762288
* The number of columns in the <a>explicit grid</a>.
22772289
* Among all the items with a <a>definite column position</a>
22782290
(explicitly positioned items, items positioned in the previous step, and items not yet positioned but with a definite column)
2279-
the largest positive line index that an item’s <a>inline-end</a> edge is positioned to,
2291+
the largest positive column-end line index,
22802292
minus 1.
2281-
* Among all 77EC items with a <a>definite column span</a>,
2282-
the largest such span.
2293+
* The largest <a>column span</a> of all items.
22832294

22842295
<div class='example'>
22852296
For example, in the following style fragment:
@@ -2296,15 +2307,15 @@ Grid Item Placement Algorithm</h3>
22962307
</pre>
22972308

22982309
The number of columns needed is 6.
2299-
The <code>#grid-item</code> element’s <a>inline-start</a> edge is positioned at index 4,
2300-
so its span ensures that it’s <a>inline-end</a> edge will be positioned at index 7.
2310+
The <code>#grid-item</code> element’s column-start line is index 4,
2311+
so its span ensures that it’s column-end line will be index 7.
23012312
This requires <code>7 - 1 = 6</code> columns to hold,
23022313
which is larger than the <a>explicit grid</a>’s 5 columns.
23032314
</div>
23042315

2305-
4. <b>Position the remaining grid items.</b>
2316+
3. <b>Position the remaining grid items.</b>
23062317

2307-
The <dfn export>auto-placement cursor</dfn> defines the current “insertion point” in the grid,
2318+
The <dfn export local-title="cursor">auto-placement cursor</dfn> defines the current “insertion point” in the grid,
23082319
specified as a pair of row and column <a>grid lines</a>.
23092320
Initially the <a>auto-placement cursor</a> at is specified with a row and column position both equal to 1.
23102321

@@ -2316,20 +2327,25 @@ Grid Item Placement Algorithm</h3>
23162327

23172328
: If the item has a <a>definite column position</a>:
23182329
::
2319-
1. Set the column position of the cursor to be equal to the <a>inline-start</a> index of the <a>grid item</a>.
2320-
2. Increment the <a>auto-placement cursor</a>’s row position until a value is found
2321-
where the <a>grid item</a> does not overlap any <a>occupied grid cells</a>
2330+
1. Set the column position of the <a>cursor</a> to be equal to the column-start line index of the <a>grid item</a>.
2331+
If this is less than the previous column position of the <a>cursor</a>,
2332+
increment the row position by 1.
2333+
2. Increment the <a>cursor</a>’s row position until a value is found
2334+
where the <a>grid item</a> does not overlap any <a>occupied</a> grid cells
23222335
(creating new rows in the <a>implicit grid</a> as necessary).
2323-
Position the item's <a>block-start</a> edge to the <a>auto-placement cursor</a>’s row position.
2336+
3. Set the item's row-start line to the <a>cursor's</a> row position.
2337+
(Implicitly setting the item's row-end line according to its span, as well.)
23242338

23252339
: If the item has an <a>automatic grid position</a> in both axes:
23262340
::
23272341
1. Increment the column position of the <a>auto-placement cursor</a>
2328-
until this item’s <a>grid area</a> does not overlap any <a>occupied grid cells</a>
2329-
or overflow the number of columns determined in the previous step.
2342+
until either this item’s <a>grid area</a> does not overlap any <a>occupied</a> grid cells,
2343+
or the <a>cursor's</a> column position,
2344+
plus the item's column span,
2345+
overflow the number of columns in the implicit grid,
2346+
as determined earlier in this algorithm.
23302347
2. If a non-overlapping position was found in the previous step,
2331-
position the item’s <a>inline-start</a> and <a>block-start</a> edges
2332-
to the <a>auto-placement cursor</a>’s column and row position, respectively
2348+
set the item's row-start and column-start lines to the <a>cursor's</a> position.
23332349
Otherwise,
23342350
increment the <a>auto-placement cursor</a>’s row position
23352351
(creating new rows in the <a>implicit grid</a> as necessary),
@@ -2343,21 +2359,24 @@ Grid Item Placement Algorithm</h3>
23432359
: If the item has a <a>definite column position</a>:
23442360
::
23452361
1. Set the row position of the cursor to 1.
2346-
2. Set the column position of the cursor to be equal to the <a>inline-start</a> index of the <a>grid item</a>.
2347-
3. Increment the <a>auto-placement cursor</a>’s row position until a value is found
2348-
where the <a>grid item</a> does not overlap any <a>occupied grid cells</a>
2362+
Set the column position of the cursor to be equal to the column-start line index of the <a>grid item</a>.
2363+
2. Increment the <a>auto-placement cursor</a>’s row position until a value is found
2364+
where the <a>grid item</a> does not overlap any <a>occupied</a> grid cells
23492365
(creating new rows in the <a>implicit grid</a> as necessary).
2350-
Position the item's <a>block-start</a> edge to the <a>auto-placement cursor</a>’s row position.
2366+
3. Set the item's row-start line index to the <a>cursor's</a> row position.
2367+
(Implicitly setting the item's row-end line according to its span, as well.)
23512368

23522369
: If the item has an <a>automatic grid position</a> in both axes:
23532370
::
2354-
1. Reset the cursor's row and column positions both to 1.
2371+
1. Set the cursor's row and column positions both to 1.
23552372
2. Increment the column position of the <a>auto-placement cursor</a>
2356-
until this item’s <a>grid area</a> does not overlap any <a>occupied grid cells</a>
2357-
or overflow the number of columns determined in the previous step.
2373+
until either this item’s <a>grid area</a> does not overlap any <a>occupied</a> grid cells,
2374+
or the <a>cursor's</a> column position,
2375+
plus the item's column span,
2376+
overflow the number of columns in the implicit grid,
2377+
as determined earlier in this algorithm.
23582378
3. If a non-overlapping position was found in the previous step,
2359-
position the item’s <a>inline-start</a> and <a>block-start</a> edges
2360-
to the <a>auto-placement cursor</a>’s column and row position, respectively
2379+
set the item's row-start and column-start lines to the <a>cursor's</a> position.
23612380
Otherwise,
23622381
increment the <a>auto-placement cursor</a>’s row position
23632382
(creating new rows in the <a>implicit grid</a> as necessary),
@@ -2378,17 +2397,13 @@ Grid Item Placement Algorithm</h3>
23782397
find the first row with an unoccupied cell in that column.
23792398
That cell is now the <a>default stacking cell for the column</a>.
23802399

2381-
Position the item's <a>inline-start</a> and <a>block-start</a> edges
2400+
Set the item's row-start and column-start line indexes
23822401
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>.
23832402

23842403
: If the item has an <a>automatic grid position</a> in both axes:
2385-
:: Position the item's <a>inline-start</a> and <a>block-start</a> edges
2404+
:: Set the item's row-start and column-start line indexes
23862405
to the column and row position of the <a>default stacking cell</a>.
23872406

2388-
Issue: This needs to be setting up the containing block for the item,
2389-
not explicitly positioning the item's edges.
2390-
(Alignment properties can change where in the specified area it actually sits.)
2391-
23922407

23932408
<h2 id='alignment'>
23942409
Alignment</h2>

0 commit comments

Comments
 (0)