Skip to content

Commit b6a4e70

Browse files
fantasaifantasai
committed
[css-grid] Remove grid-template shorthand per WG resolution. (The grid shorthand remains.) We can add it back if people particularly need it; seems more likely to be confusing than helpful because the main difference is in resetting behavior.
1 parent 4a9c9d6 commit b6a4e70

1 file changed

Lines changed: 92 additions & 115 deletions

File tree

‎css-grid/Overview.bs‎

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

1875-
<!--
1876-
██████ ████████ ████ ████████ ████████ ████████ ██ ██ ████████ ██ ███ ████████ ████████
1877-
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ██ ██ ██ ██ ██ ██
1878-
██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██ ██ ██ ██ ██ ██ ██
1879-
██ ████ ████████ ██ ██ ██ ███████ ██ ██████ ██ ███ ██ ████████ ██ ██ ██ ██ ██████
1880-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████████ ██ ██
1881-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1882-
██████ ██ ██ ████ ████████ ██ ████████ ██ ██ ██ ████████ ██ ██ ██ ████████
1883-
-->
1884-
1885-
<h3 id='explicit-grid-shorthand'>
1886-
Explicit Grid Shorthand: the 'grid-template' property</h3>
1887-
1888-
<pre class='propdef'>
1889-
Name: grid-template
1890-
Value: none | subgrid | <nobr>[ <<'grid-template-rows'>> / <<'grid-template-columns'>> ]</nobr> | <nobr>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</nobr>
1891-
Initial: see individual properties
1892-
Applies to: <a>grid containers</a>
1893-
Inherited: see individual properties
1894-
Percentages: see individual properties
1895-
Media: visual
1896-
Computed value: see individual properties
1897-
</pre>
1898-
1899-
The 'grid-template' property is a <a>shorthand</a> for setting
1900-
'grid-template-columns', 'grid-template-rows', and 'grid-template-areas' in a single declaration.
1901-
It has several distinct syntax forms:
1902-
1903-
<dl dfn-for=grid-template dfn-type=value>
1904-
<dt><dfn>none</dfn>
1905-
<dd>
1906-
Sets all three properties to their initial values (<a value for=grid-template-rows>none</a>).
1907-
1908-
<dt><dfn>subgrid</dfn>
1909-
<dd>
1910-
Sets 'grid-template-rows' and 'grid-template-columns' to ''grid-template-rows/subgrid'',
1911-
and 'grid-template-areas' to its initial value.
1912-
1913-
<dt><dfn id='grid-template-rowcol'><<'grid-template-rows'>> / <<'grid-template-columns'>></dfn>
1914-
<dd>
1915-
Sets 'grid-template-rows' and 'grid-template-columns' to the specified values, respectively,
1916-
and sets 'grid-template-areas' to ''grid-template-areas/none''.
1917-
1918-
<div class='example'>
1919-
<pre>grid-template: auto 1fr / auto 1fr auto;</pre>
1920-
1921-
is equivalent to
1922-
1923-
<pre>
1924-
grid-template-rows: auto 1fr;
1925-
grid-template-columns: auto 1fr auto;
1926-
grid-template-areas: none;
1927-
</pre>
1928-
</div>
1929-
1930-
<dt><dfn id='grid-template-ascii'>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</dfn>
1931-
<dd>
1932-
* Sets 'grid-template-areas' to the strings listed.
1933-
* Sets 'grid-template-rows' to the <<track-size>>s following each string
1934-
(filling in ''grid-template-rows/auto'' for any missing sizes),
1935-
and splicing in the named lines defined before/after each size.
1936-
* Sets 'grid-template-columns' to the track listing specified after the slash
1937-
(or ''grid-template-columns/none'', if not specified).
1938-
1939-
This syntax allows the author to align track names and sizes inline with their respective grid areas.
1940-
1941-
<div class='example'>
1942-
<pre>
1943-
grid-template: [header-top] "a a a" [header-bottom]
1944-
[main-top] "b b b" 1fr [main-bottom]
1945-
/ auto 1fr auto;
1946-
</pre>
1947-
1948-
is equivalent to
1949-
1950-
<pre>
1951-
grid-template-areas: "a a a"
1952-
"b b b";
1953-
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
1954-
grid-template-columns: auto 1fr auto;
1955-
</pre>
1956-
1957-
and creates the following grid:
1958-
1959-
<figure>
1960-
<object data="images/grid-shorthand.jpg" type="image/jpeg">
1961-
<ul>
1962-
<li>Three columns, sized ''auto'', ''1fr'', and ''auto'', respectively
1963-
<li>Two rows sized as ''auto'' and ''1fr'', respectively.
1964-
<li>A line named both “header-top” and “a-start” at the top,
1965-
a line with four names--
1966-
“header-bottom”, “main-top”, “a-end”, and “b-start”--
1967-
in the middle,
1968-
a line named “main-bottom” and “b-end” at the bottom.
1969-
<li>A line named “a-start” and “b-start” on the left edge,
1970-
and a line named “a-end” and “b-end” on the right edge.
1971-
</ul>
1972-
</object>
1973-
<figcaption>The grid created by the declarations above.
1974-
(The “a/b-start/end” names are created <a href="#implicit-named-lines">implicitly</a> by the <a>named grid areas</a>.)
1975-
</figcaption>
1976-
</figure>
1977-
</div>
1978-
</dl>
1979-
1980-
Note: The 'grid' shorthand accepts the same syntax,
1981-
but also resets the implicit grid properties to their initial values.
1982-
Unless authors want those to cascade in separately,
1983-
it is therefore recommended to use 'grid' instead of 'grid-template'.
19841875

19851876
<!--
19861877
████ ██ ██ ████████ ██ ████ ██████ ████ ████████
@@ -2284,7 +2175,7 @@ Grid Definition Shorthand: the 'grid' property</h2>
22842175

22852176
<pre class='propdef'>
22862177
Name: grid
2287-
Value: <<'grid-template'>> | [ <<'grid-auto-flow'>> [ <<'grid-auto-rows'>> [ / <<'grid-auto-columns'>> ]? ]? ]
2178+
Value: none | subgrid | <nobr>[ <<'grid-template-rows'>> / <<'grid-template-columns'>> ]</nobr> | <nobr>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</nobr> | [ <<'grid-auto-flow'>> [ <<'grid-auto-rows'>> [ / <<'grid-auto-columns'>> ]? ]? ]
22882179
Initial: see individual properties
22892180
Applies to: <a>grid containers</a>
22902181
Inherited: see individual properties
@@ -2301,9 +2192,93 @@ Grid Definition Shorthand: the 'grid' property</h2>
23012192
and the gutter properties
23022193
('grid-column-gap' and 'grid-row-gap')
23032194
in a single declaration.
2304-
If <<'grid-auto-columns'>> value is omitted,
2305-
it is set to the value specified for <<'grid-auto-rows'>>.
2306-
Other omitted values are set to their initial values.
2195+
2196+
This shorthand has several distinct syntax forms:
2197+
2198+
<dl dfn-for=grid-template dfn-type=value>
2199+
<dt><dfn>none</dfn>
2200+
<dd>
2201+
Sets all sub-properties to their initial values.
2202+
2203+
<dt><dfn>subgrid</dfn>
2204+
<dd>
2205+
Sets 'grid-template-rows' and 'grid-template-columns' to ''grid-template-rows/subgrid'',
2206+
and all other sub-properties to their initial values.
2207+
2208+
<dt><dfn id='grid-template-rowcol'><<'grid-template-rows'>> / <<'grid-template-columns'>></dfn>
2209+
<dd>
2210+
Sets 'grid-template-rows' and 'grid-template-columns' to the specified values, respectively,
2211+
and all other sub-properties to their initial values..
2212+
2213+
<div class='example'>
2214+
<pre>grid: auto 1fr / auto 1fr auto;</pre>
2215+
2216+
is equivalent to
2217+
2218+
<pre>
2219+
grid-template-rows: auto 1fr;
2220+
grid-template-columns: auto 1fr auto;
2221+
grid-template-areas: none;
2222+
</pre>
2223+
</div>
2224+
2225+
<dt><dfn id='grid-template-ascii'>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</dfn>
2226+
<dd>
2227+
* Sets 'grid-template-areas' to the strings listed.
2228+
* Sets 'grid-template-rows' to the <<track-size>>s following each string
2229+
(filling in ''grid-template-rows/auto'' for any missing sizes),
2230+
and splicing in the named lines defined before/after each size.
2231+
* Sets 'grid-template-columns' to the track listing specified after the slash
2232+
(or ''grid-template-columns/none'', if not specified).
2233+
* Sets all other sub-properties to their initial values.
2234+
2235+
This syntax allows the author to align track names and sizes inline with their respective grid areas.
2236+
2237+
<div class='example'>
2238+
<pre>
2239+
grid: [header-top] "a a a" [header-bottom]
2240+
[main-top] "b b b" 1fr [main-bottom]
2241+
/ auto 1fr auto;
2242+
</pre>
2243+
2244+
is equivalent to
2245+
2246+
<pre>
2247+
grid-template-areas: "a a a"
2248+
"b b b";
2249+
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
2250+
grid-template-columns: auto 1fr auto;
2251+
</pre>
2252+
2253+
and creates the following grid:
2254+
2255+
<figure>
2256+
<object data="images/grid-shorthand.jpg" type="image/jpeg">
2257+
<ul>
2258+
<li>Three columns, sized ''auto'', ''1fr'', and ''auto'', respectively
2259+
<li>Two rows sized as ''auto'' and ''1fr'', respectively.
2260+
<li>A line named both “header-top” and “a-start” at the top,
2261+
a line with four names--
2262+
“header-bottom”, “main-top”, “a-end”, and “b-start”--
2263+
in the middle,
2264+
a line named “main-bottom” and “b-end” at the bottom.
2265+
<li>A line named “a-start” and “b-start” on the left edge,
2266+
and a line named “a-end” and “b-end” on the right edge.
2267+
</ul>
2268+
</object>
2269+
<figcaption>The grid created by the declarations above.
2270+
(The “a/b-start/end” names are created <a href="#implicit-named-lines">implicitly</a> by the <a>named grid areas</a>.)
2271+
</figcaption>
2272+
</figure>
2273+
</div>
2274+
2275+
<dt><dfn id="grid-auto"><<'grid-auto-flow'>> [ <<'grid-auto-rows'>> [ / <<'grid-auto-columns'>> ]? ]?</dfn>
2276+
<dd>
2277+
Sets 'grid-auto-flow', 'grid-auto-rows', and 'grid-auto-columns' as specified.
2278+
If the <<'grid-auto-columns'>> value is omitted,
2279+
it is set to the value specified for <<'grid-auto-rows'>>.
2280+
If both are omitted, they are set to their initial values.
2281+
</dl>
23072282

23082283
Note: Note that you can only specify the explicit <em>or</em> the implicit grid properties in a single 'grid' declaration.
23092284
The sub-properties you don't specify are set to their initial value,
@@ -2312,8 +2287,7 @@ Grid Definition Shorthand: the 'grid' property</h2>
23122287
even though they can't be set by it.
23132288

23142289
<div class='example'>
2315-
In addition to accepting the 'grid-template' shorthand syntax for setting up the <a>explicit grid</a>,
2316-
the 'grid' shorthand can also easily set up parameters for an auto-formatted grid.
2290+
The 'grid' shorthand can also easily set up parameters for an auto-placed grid.
23172291
For example, ''grid: row 1fr;'' is equivalent to
23182292

23192293
<pre>
@@ -2334,6 +2308,9 @@ Grid Definition Shorthand: the 'grid' property</h2>
23342308
</pre>
23352309
</div>
23362310

2311+
Issue: The auto-placed grid shorthand syntax isn't particularly useful.
2312+
An auto-placed grid needs an auto axis, but also an explicit axis.
2313+
23372314
<!--
23382315
██████ ██ ███ ██ ██ ████████ ████ ██ ██ ██████
23392316
██ ██ ██ ██ ██ ███ ███ ██ ██ ██ ███ ██ ██ ██

0 commit comments

Comments
 (0)