Skip to content

Commit 3c6f703

Browse files
tabatkinstabatkins
committed
[css-grid] Restore grid-template, per WG resolution.
1 parent 657c4b3 commit 3c6f703

File tree

1 file changed

+118
-82
lines changed

1 file changed

+118
-82
lines changed

‎css-grid/Overview.bs‎

Lines changed: 118 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1811,6 +1811,118 @@ Implicit Named Areas</h4>
18111811
Such <dfn export lt="implicit named area">implicit named areas</dfn> do not appear in the value of 'grid-template-areas',
18121812
but can still be referenced by the <a>grid-placement properties</a>.
18131813

1814+
<!--
1815+
██████ ████████ ████ ████████ ████████ ████████ ██ ██ ████████ ██ ███ ████████ ████████
1816+
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ██ ██ ██ ██ ██ ██
1817+
██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██ ██ ██ ██ ██ ██ ██
1818+
██ ████ ████████ ██ ██ ██ ███████ ██ ██████ ██ ███ ██ ████████ ██ ██ ██ ██ ██████
1819+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████████ ██ ██
1820+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1821+
██████ ██ ██ ████ ████████ ██ ████████ ██ ██ ██ ████████ ██ ██ ██ ████████
1822+
-->
1823+
1824+
<h3 id='explicit-grid-shorthand'>
1825+
Explicit Grid Shorthand: the 'grid-template' property</h3>
1826+
1827+
<pre class='propdef'>
1828+
Name: grid-template
1829+
Value: none | subgrid |
1830+
Value: <nobr>[ <<'grid-template-rows'>> / <<'grid-template-columns'>> ]</nobr> |
1831+
Value: <nobr>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</nobr>
1832+
Initial: see individual properties
1833+
Applies to: <a>grid containers</a>
1834+
Inherited: see individual properties
1835+
Percentages: see individual properties
1836+
Media: visual
1837+
Computed value: see individual properties
1838+
</pre>
1839+
1840+
The 'grid-template' property is a <a>shorthand</a> for setting
1841+
'grid-template-columns', 'grid-template-rows', and 'grid-template-areas' in a single declaration.
1842+
It has several distinct syntax forms:
1843+
1844+
<dl dfn-for=grid-template dfn-type=value>
1845+
<dt><dfn>none</dfn>
1846+
<dd>
1847+
Sets all three properties to their initial values (''grid-template-rows/none'').
1848+
1849+
<dt><dfn>subgrid</dfn>
1850+
<dd>
1851+
Sets 'grid-template-rows' and 'grid-template-columns' to ''grid-template-rows/subgrid'',
1852+
and 'grid-template-areas' to its initial value.
1853+
1854+
<dt><dfn id='grid-template-rowcol'><<'grid-template-rows'>> / <<'grid-template-columns'>></dfn>
1855+
<dd>
1856+
Sets 'grid-template-rows' and 'grid-template-columns' to the specified values, respectively,
1857+
and sets 'grid-template-areas' to ''grid-template-areas/none''.
1858+
1859+
<div class='example'>
1860+
<pre>grid-template: auto 1fr / auto 1fr auto;</pre>
1861+
1862+
is equivalent to
1863+
1864+
<pre>
1865+
grid-template-rows: auto 1fr;
1866+
grid-template-columns: auto 1fr auto;
1867+
grid-template-areas: none;
1868+
</pre>
1869+
</div>
1870+
1871+
<dt><dfn id='grid-template-ascii'>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</dfn>
1872+
<dd>
1873+
* Sets 'grid-template-areas' to the strings listed.
1874+
* Sets 'grid-template-rows' to the <<track-size>>s following each string
1875+
(filling in ''grid-template-rows/auto'' for any missing sizes),
1876+
and splicing in the named lines defined before/after each size.
1877+
* Sets 'grid-template-columns' to the track listing specified after the slash
1878+
(or ''grid-template-columns/none'', if not specified).
1879+
1880+
This syntax allows the author to align track names and sizes inline with their respective grid areas.
1881+
1882+
<div class='example'>
1883+
<pre>
1884+
grid-template: [header-top] "a a a" [header-bottom]
1885+
[main-top] "b b b" 1fr [main-bottom]
1886+
/ auto 1fr auto;
1887+
</pre>
1888+
1889+
is equivalent to
1890+
1891+
<pre>
1892+
grid-template-areas: "a a a"
1893+
"b b b";
1894+
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
1895+
grid-template-columns: auto 1fr auto;
1896+
</pre>
1897+
1898+
and creates the following grid:
1899+
1900+
<figure>
1901+
<object data="images/grid-shorthand.jpg" type="image/jpeg">
1902+
<ul>
1903+
<li>Three columns, sized ''auto'', ''1fr'', and ''auto'', respectively
1904+
<li>Two rows sized as ''auto'' and ''1fr'', respectively.
1905+
<li>A line named both “header-top” and “a-start” at the top,
1906+
a line with four names--
1907+
“header-bottom”, “main-top”, “a-end”, and “b-start”--
1908+
in the middle,
1909+
a line named “main-bottom” and “b-end” at the bottom.
1910+
<li>A line named “a-start” and “b-start” on the left edge,
1911+
and a line named “a-end” and “b-end” on the right edge.
1912+
</ul>
1913+
</object>
1914+
<figcaption>The grid created by the declarations above.
1915+
(The “a/b-start/end” names are created <a href="#implicit-named-lines">implicitly</a> by the <a>named grid areas</a>.)
1916+
</figcaption>
1917+
</figure>
1918+
</div>
1919+
</dl>
1920+
1921+
Note: The 'grid' shorthand accepts the same syntax,
1922+
but also resets the implicit grid properties to their initial values.
1923+
Unless authors want those to cascade in separately,
1924+
it is therefore recommended to use 'grid' instead of 'grid-template'.
1925+
18141926

18151927
<!--
18161928
████ ██ ██ ████████ ██ ████ ██████ ████ ████████
@@ -2125,9 +2237,7 @@ Grid Definition Shorthand: the 'grid' property</h2>
21252237

21262238
<pre class='propdef'>
21272239
Name: grid
2128-
Value: none | subgrid |
2129-
Value: <nobr>[ <<'grid-template-rows'>> / <<'grid-template-columns'>> ]</nobr> |
2130-
Value: <nobr>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</nobr> |
2240+
Value: <<'grid-template'>> |
21312241
Value: <nobr>[ <<'grid-auto-flow'>> [ <<'grid-auto-rows'>> [ / <<'grid-auto-columns'>> ]? ]? ]</nobr>
21322242
Initial: see individual properties
21332243
Applies to: <a>grid containers</a>
@@ -2146,85 +2256,10 @@ Grid Definition Shorthand: the 'grid' property</h2>
21462256
('grid-column-gap' and 'grid-row-gap')
21472257
in a single declaration.
21482258

2149-
This shorthand has several distinct syntax forms:
2150-
2151-
<dl dfn-for=grid-template dfn-type=value>
2152-
<dt><dfn>none</dfn>
2153-
<dd>
2154-
Sets all sub-properties to their initial values.
2155-
2156-
<dt><dfn>subgrid</dfn>
2157-
<dd>
2158-
Sets 'grid-template-rows' and 'grid-template-columns' to ''grid-template-rows/subgrid'',
2159-
and all other sub-properties to their initial values.
2160-
2161-
<dt><dfn id='grid-template-rowcol'><<'grid-template-rows'>> / <<'grid-template-columns'>></dfn>
2162-
<dd>
2163-
Sets 'grid-template-rows' and 'grid-template-columns' to the specified values, respectively,
2164-
and all other sub-properties to their initial values..
2165-
2166-
<div class='example'>
2167-
<pre>grid: auto 1fr / auto 1fr auto;</pre>
2168-
2169-
is equivalent to
2170-
2171-
<pre>
2172-
grid-template-rows: auto 1fr;
2173-
grid-template-columns: auto 1fr auto;
2174-
grid-template-areas: none;
2175-
</pre>
2176-
</div>
2177-
2178-
<dt><dfn id='grid-template-ascii'>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</dfn>
2179-
<dd>
2180-
* Sets 'grid-template-areas' to the strings listed.
2181-
* Sets 'grid-template-rows' to the <<track-size>>s following each string
2182-
(filling in ''grid-template-rows/auto'' for any missing sizes),
2183-
and splicing in the named lines defined before/after each size.
2184-
* Sets 'grid-template-columns' to the track listing specified after the slash
2185-
(or ''grid-template-columns/none'', if not specified).
2186-
* Sets all other sub-properties to their initial values.
2187-
2188-
This syntax allows the author to align track names and sizes inline with their respective grid areas.
2189-
2190-
<div class='example'>
2191-
<pre>
2192-
grid: [header-top] "a a a" [header-bottom]
2193-
[main-top] "b b b" 1fr [main-bottom]
2194-
/ auto 1fr auto;
2195-
</pre>
2196-
2197-
is equivalent to
2198-
2199-
<pre>
2200-
grid-template-areas: "a a a"
2201-
"b b b";
2202-
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
2203-
grid-template-columns: auto 1fr auto;
2204-
</pre>
2205-
2206-
and creates the following grid:
2207-
2208-
<figure>
2209-
<object data="images/grid-shorthand.jpg" type="image/jpeg">
2210-
<ul>
2211-
<li>Three columns, sized ''auto'', ''1fr'', and ''auto'', respectively
2212-
<li>Two rows sized as ''auto'' and ''1fr'', respectively.
2213-
<li>A line named both “header-top” and “a-start” at the top,
2214-
a line with four names--
2215-
“header-bottom”, “main-top”, “a-end”, and “b-start”--
2216-
in the middle,
2217-
a line named “main-bottom” and “b-end” at the bottom.
2218-
<li>A line named “a-start” and “b-start” on the left edge,
2219-
and a line named “a-end” and “b-end” on the right edge.
2220-
</ul>
2221-
</object>
2222-
<figcaption>The grid created by the declarations above.
2223-
(The “a/b-start/end” names are created <a href="#implicit-named-lines">implicitly</a> by the <a>named grid areas</a>.)
2224-
</figcaption>
2225-
</figure>
2226-
</div>
2259+
This shorthand has one new syntax form,
2260+
beyond what 'grid-template' defines:
22272261

2262+
<dl dfn-for=grid dfn-type=value>
22282263
<dt><dfn id="grid-auto"><<'grid-auto-flow'>> [ <<'grid-auto-rows'>> [ / <<'grid-auto-columns'>> ]? ]?</dfn>
22292264
<dd>
22302265
Sets 'grid-auto-flow', 'grid-auto-rows', and 'grid-auto-columns' as specified.
@@ -2240,7 +2275,8 @@ Grid Definition Shorthand: the 'grid' property</h2>
22402275
even though they can't be set by it.
22412276

22422277
<div class='example'>
2243-
The 'grid' shorthand can also easily set up parameters for an auto-placed grid.
2278+
In addition to accepting the 'grid-template' shorthand syntax for setting up the <a>explicit grid</a>,
2279+
the 'grid' shorthand can also easily set up parameters for an auto-formatted grid.
22442280
For example, ''grid: row 1fr;'' is equivalent to
22452281

22462282
<pre>

0 commit comments

Comments
 (0)