E84C [css-grid] Move auto-placement algorithm per <http://lists.w3.org/Arc… · w3c/csswg-drafts@b7774c7 · GitHub
Skip to content

Commit b7774c7

Browse files
fantasaifantasai
committed
[css-grid] Move auto-placement algorithm per <http://lists.w3.org/Archives/Public/www-style/2014May/0011.html>
1 parent 2a1b683 commit b7774c7

2 files changed

Lines changed: 373 additions & 355 deletions

File tree

‎css-grid/Overview.bs‎

Lines changed: 134 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1475,7 +1475,7 @@ Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-colu
14751475
</div>
14761476

14771477
<h3 id="grid-auto-flow-property">
1478-
Automatic Placement: the 'grid-auto-flow' property</h3>
1478+
<dfn title="auto-placement|automatic placement">Automatic Placement</dfn>: the 'grid-auto-flow' property</h3>
14791479

14801480
<pre class='propdef'>
14811481
Name: grid-auto-flow
@@ -1488,7 +1488,8 @@ Automatic Placement: the 'grid-auto-flow' property</h3>
14881488
Computed value: specified value
14891489
</pre>
14901490

1491-
<a>Grid items</a> that aren't explicitly placed are automatically placed into an unoccupied space in the <a>grid container</a>.
1491+
<a>Grid items</a> that aren't explicitly placed are automatically placed
1492+
into an unoccupied space in the <a>grid container</a>.
14921493
The 'grid-auto-flow' property controls the direction in which the search for unoccupied space takes place,
14931494
and whether rows or columns are added as needed to accommodate the content.
14941495

@@ -1626,130 +1627,6 @@ Automatic Placement: the 'grid-auto-flow' property</h3>
16261627
</pre>
16271628
</div>
16281629

1629-
<h4 id='auto-placement-algo'>
1630-
Automatic Grid Item Placement Algorithm</h4>
1631-
1632-
The following <dfn export title="auto-placement|auto-placement algorithm">auto-placement algorithm</dfn>
1633-
places <a>grid items</a> with <a>automatic grid positions</a> into a <a>definite grid position</a>.
1634-
1635-
To aid in clarity,
1636-
this algorithm is written with the assumption that 'grid-auto-flow' is set to ''grid-auto-flow/row''.
1637-
If it is instead set to ''grid-auto-flow/column'',
1638-
swap all mentions of rows and columns in this algorithm.
1639-
1640-
For the purpose of this algorithm,
1641-
an <dfn>occupied grid cell</dfn>
1642-
is any <a>grid cell</a> which is contained within
1643-
any <a>named grid area</a>
1644-
or the <a>grid area</a> of any previously-positioned <a>grid item</a>.
1645-
1646-
<ol>
1647-
<li>
1648-
<b>Position anything that's not auto-positioned.</b>
1649-
1650-
Before auto-positioning anything,
1651-
position every <a>grid item</a>
1652-
with a <a>definite grid position</a> in both axes.
1653-
1654-
<li>
1655-
<b>Process the items locked to a given row.</b>
1656-
1657-
For each <a>grid item</a> with a <a>definite row position</a>
1658-
(that is, the 'grid-row-start' and 'grid-row-end' properties define a <a>definite grid position</a>),
1659-
in <a>order-modified document order</a>,
1660-
position its <a>inline-start</a> edge
1661-
to the earliest (smallest positive index) line index
1662-
that ensures this item’s <a>grid area</a> will not overlap any <a>occupied grid cells</a>.
1663-
1664-
<li>
1665-
<b>Determine the number of columns in the implicit grid.</b>
1666-
1667-
Set the number of columns in the <a>implicit grid</a> to the larger of:
1668-
1669-
<ul>
1670-
<li>
1671-
The number of columns in the <a>explicit grid</a>.
1672-
1673-
<li>
1674-
Among all the items with a <a>definite column position</a>
1675-
(explicitly positioned items, items positioned in the previous step, and items not yet positioned but with a definite column)
1676-
the largest positive line index that an item’s <a>inline-end</a> edge is positioned to,
1677-
minus 1.
1678-
1679-
<li>
1680-
Among all items with a <a>definite column span</a>,
1681-
the largest such span.
1682-
</ul>
1683-
1684-
<div class='example'>
1685-
For example, in the following style fragment:
1686-
1687-
<pre class=css>
1688-
#grid {
1689-
display: grid;
1690-
grid-template-columns: repeat(5, 100px);
1691-
grid-auto-flow: row;
1692-
}
1693-
#grid-item {
1694-
grid-column: 4 / span 3;
1695-
}
1696-
</pre>
1697-
1698-
The number of columns needed is 6.
1699-
The <code>#grid-item</code> element’s <a>inline-start</a> edge is positioned at index 4,
1700-
so its span ensures that it’s <a>inline-end</a> edge will be positioned at index 7.
1701-
This requires <code>7 - 1 = 6</code> columns to hold,
1702-
which is larger than the <a>explicit grid</a>’s 5 columns.
1703-
</div>
1704-
1705-
1706-
<li>
1707-
<b>Position the remaining grid items.</b>
1708-
1709-
The <dfn export>auto-placement cursor</dfn> defines the current "insertion point" in the grid,
1710-
specified as a pair of row and column <a>grid lines</a>.
1711-
Initially the <a>auto-placement cursor</a> at is specified with a row and column position both equal to 1.
1712-
1713-
For each <a>grid item</a> that hasn't been positioned by the previous steps,
1714-
in <a>order-modified document order</a>:
1715-
1716-
<dl>
1717-
<dt>If the item has a <a>definite column position</a>:
1718-
<dd>
1719-
<ol>
1720-
<li>
1721-
Set the column position of the cursor to be equal to the <a>inline-start</a> index of the <a>grid item</a>.
1722-
1723-
<li>
1724-
Increment the <a>auto-placement cursor</a>’s row position until a value is found
1725-
where the <a>grid item</a> does not overlap any <a>occupied grid cells</a>
1726-
(creating new rows in the <a>implicit grid</a> as necessary).
1727-
Position the item's <a>block-start</a> edge to the <a>auto-placement cursor</a>’s row position.
1728-
</ol>
1729-
1730-
<dt>If the item has an <a>automatic grid position</a> in both axes:
1731-
<dd>
1732-
<ol>
1733-
<li>
1734-
Increment the column position of the <a>auto-placement cursor</a>
1735-
until this item’s <a>grid area</a> does not overlap any <a>occupied grid cells</a>
1736-
or overflow the number of columns determined in the previous step.
1737-
1738-
<li>
1739-
If a non-overlapping position was found in the previous step,
1740-
position the item’s <a>inline-start</a> and <a>block-start</a> edges
1741-
to the <a>auto-placement cursor</a>’s column and row position, respectively
1742-
Otherwise,
1743-
increment the <a>auto-placement cursor</a>’s row position
1744-
(creating new rows in the <a>implicit grid</a> as necessary),
1745-
set its column position to 1,
1746-
and return to the previous step.
1747-
</ol>
1748-
</dl>
1749-
1750-
If 'grid-auto-flow' specifies the ''dense'' keyword,
1751-
reset the <a>auto-placement cursor</a> to 1/1 each time an item is placed.
1752-
</ol>
17531630

17541631
<h2 id='grid-shorthand'>
17551632
Grid Definition Shorthand: the 'grid' property</h2>
@@ -2319,6 +2196,137 @@ Absolutely-positioned Grid Items</h3>
23192196
but the offsets won't.
23202197
</div>
23212198

2199+
<h4 id='auto-placement-algo'>
2200+
Grid Item Placement Algorithm</h4>
2201+
2202+
The following <dfn title="auto-placement algorithm|grid item placement algorithm">grid item placement algorithm</dfn>
2203+
assigns <i>grid items</i> to <i>grid cells</i>
2204+
such that all items in the <i>grid container</i>
2205+
are given a <i>definite grid position</i>.
2206+
It places first all explicitly-positioned items,
2207+
then items with automatic grid positions,
2208+
adding rows/columns as necessary
2209+
to contain all of the grid items.
2210+
2211+
To aid in clarity,
2212+
this algorithm is written with the assumption that 'grid-auto-flow' is set to ''grid-auto-flow/row''.
2213+
If it is instead set to ''grid-auto-flow/column'',
2214+
swap all mentions of rows and columns in this algorithm.
2215+
2216+
For the purpose of this algorithm,
2217+
an <dfn>occupied grid cell</dfn>
2218+
is any <a>grid cell</a> which is contained within
2219+
any <a>named grid area</a>
2220+
or the <a>grid area</a> of any previously-positioned <a>grid item</a>.
2221+
2222+
<ol>
2223+
<li>
2224+
<b>Position anything that's not auto-positioned.</b>
2225+
2226+
Before auto-positioning anything,
2227+
position every <a>grid item</a>
2228+
with a <a>definite grid position</a> in both axes.
2229+
2230+
<li>
2231+
<b>Process the items locked to a given row.</b>
2232+
2233+
For each <a>grid item</a> with a <a>definite row position</a>
2234+
(that is, the 'grid-row-start' and 'grid-row-end' properties define a <a>definite grid position</a>),
2235+
in <a>order-modified document order</a>,
2236+
position its <a>inline-start</a> edge
2237+
to the earliest (smallest positive index) line index
2238+
that ensures this item’s <a>grid area</a> will not overlap any <a>occupied grid cells</a>.
2239+
2240+
<li>
2241+
<b>Determine the number of columns in the implicit grid.</b>
2242+
2243+
Set the number of columns in the <a>implicit grid</a> to the larger of:
2244+
2245+
<ul>
2246+
<li>
2247+
The number of columns in the <a>explicit grid</a>.
2248+
2249+
<li>
2250+
Among all the items with a <a>definite column position</a>
2251+
(explicitly positioned items, items positioned in the previous step, and items not yet positioned but with a definite column)
2252+
the largest positive line index that an item’s <a>inline-end</a> edge is positioned to,
2253+
minus 1.
2254+
2255+
<li>
2256+
Among all items with a <a>definite column span</a>,
2257+
the largest such span.
2258+
</ul>
2259+
2260+
<div class='example'>
2261+
For example, in the following style fragment:
2262+
2263+
<pre class=css>
2264+
#grid {
2265+
display: grid;
2266+
grid-template-columns: repeat(5, 100px);
2267+
grid-auto-flow: row;
2268+
}
2269+
#grid-item {
2270+
grid-column: 4 / span 3;
2271+
}
2272+
</pre>
2273+
2274+
The number of columns needed is 6.
2275+
The <code>#grid-item</code> element’s <a>inline-start</a> edge is positioned at index 4,
2276+
so its span ensures that it’s <a>inline-end</a> edge will be positioned at index 7.
2277+
This requires <code>7 - 1 = 6</code> columns to hold,
2278+
which is larger than the <a>explicit grid</a>’s 5 columns.
2279+
</div>
2280+
2281+
2282+
<li>
2283+
<b>Position the remaining grid items.</b>
2284+
2285+
The <dfn export>auto-placement cursor</dfn> defines the current "insertion point" in the grid,
2286+
specified as a pair of row and column <a>grid lines</a>.
2287+
Initially the <a>auto-placement cursor</a> at is specified with a row and column position both equal to 1.
2288+
2289+
For each <a>grid item</a> that hasn't been positioned by the previous steps,
2290+
in <a>order-modified document order</a>:
2291+
2292+
<dl>
2293+
<dt>If the item has a <a>definite column position</a>:
2294+
<dd>
2295+
<ol>
2296+
<li>
2297+
Set the column position of the cursor to be equal to the <a>inline-start</a> index of the <a>grid item</a>.
2298+
2299+
<li>
2300+
Increment the <a>auto-placement cursor</a>’s row position until a value is found
2301+
where the <a>grid item</a> does not overlap any <a>occupied grid cells</a>
2302+
(creating new rows in the <a>implicit grid</a> as necessary).
2303+
Position the item's <a>block-start</a> edge to the <a>auto-placement cursor</a>’s row position.
2304+
</ol>
2305+
2306+
<dt>If the item has an <a>automatic grid position</a> in both axes:
2307+
<dd>
2308+
<ol>
2309+
<li>
2310+
Increment the column position of the <a>auto-placement cursor</a>
2311+
until this item’s <a>grid area</a> does not overlap any <a>occupied grid cells</a>
2312+
or overflow the number of columns determined in the previous step.
2313+
2314+
<li>
2315+
If a non-overlapping position was found in the previous step,
2316+
position the item’s <a>inline-start</a> and <a>block-start</a> edges
2317+
to the <a>auto-placement cursor</a>’s column and row position, respectively
2318+
Otherwise,
2319+
increment the <a>auto-placement cursor</a>’s row position
2320+
(creating new rows in the <a>implicit grid</a> as necessary),
2321+
set its column position to 1,
2322+
and return to the previous step.
2323+
</ol>
2324+
</dl>
2325+
2326+
If 'grid-auto-flow' specifies the ''dense'' keyword,
2327+
reset the <a>auto-placement cursor</a> to 1/1 each time an item is placed.
2328+
</ol>
2329+
23222330
<h2 id='alignment'>
23232331
Alignment</h2>
23242332

0 commit comments

Comments
 (0)