Skip to content

Commit fa783f6

Browse files
tabatkinstabatkins
committed
[css-grid] Add grid-template shorthand.
1 parent e8736c3 commit fa783f6

2 files changed

Lines changed: 295 additions & 16 deletions

File tree

‎css-grid/Overview.html‎

Lines changed: 190 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,10 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
272272
</span> Named Areas: the ‘<code
273273
class=property>grid-template-areas</code>’ property</a>
274274

275-
<li><a href="#auto-tracks"><span class=secno>5.3. </span> Auto-generated
275+
<li><a href="#grid-template-property"><span class=secno>5.3. </span> The
276+
‘<code class=property>grid-template</code>’ shorthand property</a>
277+
278+
<li><a href="#auto-tracks"><span class=secno>5.4. </span> Auto-generated
276279
Rows and Columns: the ‘<code class=property>grid-auto-rows</code>’
277280
and ‘<code class=property>grid-auto-columns</code>’ properties</a>
278281
</ul>
@@ -1205,14 +1208,14 @@ <h2 id=grid-definition><span class=secno>5. </span> Defining the Grid</h2>
12051208
href="#grid-template-areas"><code
12061209
class=property>grid-template-areas</code></a>’ together define the <dfn
12071210
id=explicit-grid>explicit grid</dfn> of a <a
1208-
href="#grid-container"><i>grid container</i></a>. The ‘<code
1209-
class=property>grid-template</code>’ property is a shorthand that sets
1210-
all three at the same time. The final grid may end up larger due to <a
1211-
href="#grid-item"><i>grid items</i></a> placed outside the <a
1212-
href="#explicit-grid"><i>explicit grid</i></a>; in this case, any implicit
1213-
tracks are sized by the ‘<a href="#grid-auto-rows"><code
1214-
class=property>grid-auto-rows</code></a>’ and ‘<a
1215-
href="#grid-auto-columns"><code
1211+
href="#grid-container"><i>grid container</i></a>. The ‘<a
1212+
href="#grid-template"><code class=property>grid-template</code></a>’
1213+
property is a shorthand that sets all three at the same time. The final
1214+
grid may end up larger due to <a href="#grid-item"><i>grid items</i></a>
1215+
placed outside the <a href="#explicit-grid"><i>explicit grid</i></a>; in
1216+
this case, any implicit tracks are sized by the ‘<a
1217+
href="#grid-auto-rows"><code class=property>grid-auto-rows</code></a>’
1218+
and ‘<a href="#grid-auto-columns"><code
12161219
class=property>grid-auto-columns</code></a>’ properties.
12171220

12181221
<p> The size of the <a href="#explicit-grid"><i>explicit grid</i></a> is
@@ -1749,7 +1752,144 @@ <h3 id=grid-template-areas-property><span class=secno>5.2. </span> Named
17491752
&lt;/style></pre>
17501753
</div>
17511754

1752-
<h3 id=auto-tracks><span class=secno>5.3. </span> Auto-generated Rows and
1755+
<h3 id=grid-template-property><span class=secno>5.3. </span> The ‘<a
1756+
href="#grid-template"><code class=property>grid-template</code></a>’
1757+
shorthand property</h3>
1758+
1759+
<table class=propdef>
1760+
<tbody>
1761+
<tr>
1762+
<td>Name:
1763+
1764+
<td><dfn id=grid-template>grid-template</dfn>
1765+
1766+
<tr>
1767+
<td>Value:
1768+
1769+
<td>none | <var>&lt;‘<a href="#grid-template-columns"><code
1770+
class=property>grid-template-columns</code></a>’></var> /
1771+
<var>&lt;‘<a href="#grid-template-rows"><code
1772+
class=property>grid-template-rows</code></a>’></var> | [
1773+
<var>&lt;‘<a href="#grid-template-columns"><code
1774+
class=property>grid-template-columns</code></a>’></var> / ]? [ <a
1775+
href="#ltline-names"><var>&lt;line-names></var></a>?
1776+
<var>&lt;string></var> [ <a
1777+
href="#lttrack-size"><var>&lt;track-size></var></a> <a
1778+
href="#ltline-names"><var>&lt;line-names></var></a> ]? ]+
1779+
1780+
<tr>
1781+
<td>Initial:
1782+
1783+
<td>see individual properties
1784+
1785+
<tr>
1786+
<td>Applies to:
1787+
1788+
<td><a href="#grid-container"><i>grid containers</i></a>
1789+
1790+
<tr>
1791+
<td>Inherited:
1792+
1793+
<td>see individual properties
1794+
1795+
<tr>
1796+
<td>Percentages:
1797+
1798+
<td>see individual properties
1799+
1800+
<tr>
1801+
<td>Media:
1802+
1803+
<td>visual
1804+
1805+
<tr>
1806+
<td>Computed value:
1807+
1808+
<td>see individual properties
1809+
</table>
1810+
1811+
<p> The ‘<a href="#grid-template"><code
1812+
class=property>grid-template</code></a>’ property is a shorthand for
1813+
setting ‘<a href="#grid-template-columns"><code
1814+
class=property>grid-template-columns</code></a>’, ‘<a
1815+
href="#grid-template-rows"><code
1816+
class=property>grid-template-rows</code></a>’, and ‘<a
1817+
href="#grid-template-areas"><code
1818+
class=property>grid-template-areas</code></a>’ in a single declaration.
1819+
It has three distinct syntax forms:
1820+
1821+
<dl>
1822+
<dt><dfn id=none>‘<code class=css>none</code>’</dfn>
1823+
1824+
<dd> Sets all three properties to their initial values (‘<a
1825+
href="#none0"><code class=css>none</code></a>’).
1826+
1827+
<dt><dfn id=ltgrid-template-columns-ltgrid-template-><var>&lt;‘<code
1828+
class=property>grid-template-columns</code>’></var> / <var>&lt;‘<code
1829+
class=property>grid-template-rows</code>’></var></dfn>
1830+
1831+
<dd> Sets ‘<a href="#grid-template-columns"><code
1832+
class=property>grid-template-columns</code></a>’ and ‘<a
1833+
href="#grid-template-rows"><code
1834+
class=property>grid-template-rows</code></a>’ to the specified values,
1835+
respectively, and sets ‘<a href="#grid-template-areas"><code
1836+
class=property>grid-template-areas</code></a>’ to ‘<a
1837+
href="#none0"><code class=css>none</code></a>’.
1838+
<div class=example>
1839+
<pre>grid-template: auto 1fr auto / auto 1fr;</pre>
1840+
1841+
<p> is equivalent to
1842+
1843+
<pre>
1844+
grid-template-columns: auto 1fr auto;
1845+
grid-template-rows: auto 1fr;
1846+
grid-template-areas: none;</pre>
1847+
</div>
1848+
1849+
<dt><dfn id=ltgrid-template-columns-ltline-names-lts>[ <var>&lt;‘<code
1850+
class=property>grid-template-columns</code>’></var> / ]?<br>
1851+
[ <var>&lt;line-names></var>? <var>&lt;string></var> [
1852+
<var>&lt;track-size></var> <var>&lt;line-names></var> ]? ]+</dfn>
1853+
1854+
<dd>
1855+
<ul>
1856+
<li> Sets ‘<a href="#grid-template-columns"><code
1857+
class=property>grid-template-columns</code></a>’ to the track listing
1858+
specified before the slash (or ‘<a href="#none0"><code
1859+
class=css>none</code></a>’, if not specified).
1860+
1861+
<li> Sets ‘<a href="#grid-template-areas"><code
1862+
class=property>grid-template-areas</code></a>’ to the strings listed
1863+
after the slash.
1864+
1865+
<li> Sets ‘<a href="#grid-template-rows"><code
1866+
class=property>grid-template-rows</code></a>’ to the <a
1867+
href="#lttrack-size"><var>&lt;track-size></var></a>s following each
1868+
string (filling in ‘<a href="#track-size-auto"><code
1869+
class=css>auto</code></a>’ for any missing sizes), and splicing in
1870+
the named lines defined before/after each size.
1871+
</ul>
1872+
1873+
<p> This syntax allows the author to align track names and sizes inline
1874+
within the grid area syntax.
1875+
1876+
<div class=example>
1877+
<pre>
1878+
grid-template: auto 1fr auto /
1879+
(header-top) "a a a" (header-bottom)
1880+
(main-top) "b b b" 1fr (main-bottom);</pre>
1881+
1882+
<p> is equivalent to
1883+
1884+
<pre>
1885+
grid-template-columns: auto 1fr auto;
1886+
grid-template-rows: (header-top) auto (header-bottom main-top) 1fr (main-bottom);
1887+
grid-template-areas: "a a a"
1888+
"b b b";</pre>
1889+
</div>
1890+
</dl>
1891+
1892+
<h3 id=auto-tracks><span class=secno>5.4. </span> Auto-generated Rows and
17531893
Columns: the ‘<a href="#grid-auto-rows"><code
17541894
class=property>grid-auto-rows</code></a>’ and ‘<a
17551895
href="#grid-auto-columns"><code
@@ -2268,7 +2408,7 @@ <h3 id=grid-auto-flow-property><span class=secno>6.3. </span> Automatic
22682408
whether rows or columns are added as needed to accommodate the content.
22692409

22702410
<dl>
2271-
<dt><dfn id=none>‘<code class=css>none</code>’</dfn>
2411+
<dt><dfn id=none0>‘<code class=css>none</code>’</dfn>
22722412

22732413
<dd> The <a href="#grid-area"><i>grid area</i></a> of <a
22742414
href="#grid-item"><i>grid items</i></a> that are auto-placed has its
@@ -3783,13 +3923,13 @@ <h2 class=no-num id=index> Index</h2>
37833923
title="section 6.2."><strong>6.2.</strong></a>
37843924

37853925
<li>grid-auto-columns, <a href="#grid-auto-columns"
3786-
title="section 5.3."><strong>5.3.</strong></a>
3926+
title="section 5.4."><strong>5.4.</strong></a>
37873927

37883928
<li>grid-auto-flow, <a href="#grid-auto-flow"
37893929
title="section 6.3."><strong>6.3.</strong></a>
37903930

37913931
<li>grid-auto-rows, <a href="#grid-auto-rows"
3792-
title="section 5.3."><strong>5.3.</strong></a>
3932+
title="section 5.4."><strong>5.4.</strong></a>
37933933

37943934
<li>grid column, <a href="#columns"
37953935
title="section 2."><strong>2.</strong></a>
@@ -3847,12 +3987,28 @@ <h2 class=no-num id=index> Index</h2>
38473987
<li>grid span, <a href="#grid-span"
38483988
title="section 6.1."><strong>6.1.</strong></a>
38493989

3990+
<li>grid-template, <a href="#grid-template"
3991+
title="section 5.3."><strong>5.3.</strong></a>
3992+
38503993
<li>grid-template-areas, <a href="#grid-template-areas"
38513994
title="section 5.2."><strong>5.2.</strong></a>
38523995

38533996
<li>grid-template-columns, <a href="#grid-template-columns"
38543997
title="section 5.1."><strong>5.1.</strong></a>
38553998

3999+
<li><var>&lt;‘<code
4000+
class=property>grid-template-columns</code>’></var> / <var>&lt;‘<code
4001+
class=property>grid-template-rows</code>’></var>, <a
4002+
href="#ltgrid-template-columns-ltgrid-template-"
4003+
title="section 5.3."><strong>5.3.</strong></a>
4004+
4005+
<li>[ <var>&lt;‘<code
4006+
class=property>grid-template-columns</code>’></var> / ]? [
4007+
<var>&lt;line-names></var>? <var>&lt;string></var> [
4008+
<var>&lt;track-size></var> <var>&lt;line-names></var> ]? ]+, <a
4009+
href="#ltgrid-template-columns-ltline-names-lts"
4010+
title="section 5.3."><strong>5.3.</strong></a>
4011+
38564012
<li>grid-template-rows, <a href="#grid-template-rows"
38574013
title="section 5.1."><strong>5.1.</strong></a>
38584014

@@ -3863,13 +4019,13 @@ <h2 class=no-num id=index> Index</h2>
38634019
title="section 5.1.3."><strong>5.1.3.</strong></a>
38644020

38654021
<li>implicit grid column, <a href="#implicit-grid-tracks"
3866-
title="section 5.3."><strong>5.3.</strong></a>
4022+
title="section 5.4."><strong>5.4.</strong></a>
38674023

38684024
<li>implicit grid row, <a href="#implicit-grid-tracks"
3869-
title="section 5.3."><strong>5.3.</strong></a>
4025+
title="section 5.4."><strong>5.4.</strong></a>
38704026

38714027
<li>implicit grid track, <a href="#implicit-grid-tracks"
3872-
title="section 5.3."><strong>5.3.</strong></a>
4028+
title="section 5.4."><strong>5.4.</strong></a>
38734029

38744030
<li>‘<code class=css>inline-grid</code>’, <a
38754031
href="#display-inline-grid"
@@ -3911,6 +4067,7 @@ <h2 class=no-num id=index> Index</h2>
39114067
title="section 5.1."><strong>5.1.</strong></a>
39124068

39134069
<li>‘<code class=css>none</code>’, <a href="#none"
4070+
title="section 5.3."><strong>5.3.</strong></a>, <a href="#none0"
39144071
title="section 6.3."><strong>6.3.</strong></a>
39154072

39164073
<li>‘<code class=property>order</code>’, <a href="#order"
@@ -4142,6 +4299,23 @@ <h2 class=no-num id=property-index> Property index</h2>
41424299

41434300
<td>visual
41444301

4302+
<tr>
4303+
<th><a class=property href="#grid-template">grid-template</a>
4304+
4305+
<td>none | &lt;‘grid-template-columns’> /
4306+
&lt;‘grid-template-rows’> | [ &lt;‘grid-template-columns’> / ]?
4307+
[ &lt;line-names>? &lt;string> [ &lt;track-size> &lt;line-names> ]? ]+
4308+
4309+
<td>see individual properties
4310+
4311+
<td>grid containers
4312+
4313+
<td>see individual properties
4314+
4315+
<td>see individual properties
4316+
4317+
<td>visual
4318+
41454319
<tr>
41464320
<th><a class=property
41474321
href="#grid-template-areas">grid-template-areas</a>

‎css-grid/Overview.src.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1334,6 +1334,111 @@ <h3 id="grid-template-areas-property">
13341334
&lt;/style></pre>
13351335
</div>
13361336

1337+
1338+
<h3 id='grid-template-property'>
1339+
The 'grid-template' shorthand property</h3>
1340+
1341+
<table class="propdef">
1342+
<tr>
1343+
<td>Name:
1344+
<td><dfn>grid-template</dfn>
1345+
1346+
<tr>
1347+
<td>Value:
1348+
<td>none | <var>&lt;'grid-template-columns'></var> / <var>&lt;'grid-template-rows'></var> |
1349+
[ <var>&lt;'grid-template-columns'></var> / ]?
1350+
[ <var>&lt;line-names></var>? <var>&lt;string></var> [ <var>&lt;track-size></var> <var>&lt;line-names></var> ]? ]+
1351+
1352+
<tr>
1353+
<td>Initial:
1354+
<td>see individual properties
1355+
1356+
<tr>
1357+
<td>Applies to:
1358+
<td><i>grid containers</i>
1359+
1360+
<tr>
1361+
<td>Inherited:
1362+
<td>see individual properties
1363+
1364+
<tr>
1365+
<td>Percentages:
1366+
<td>see individual properties
1367+
1368+
<tr>
1369+
<td>Media:
1370+
<td>visual
1371+
1372+
<tr>
1373+
<td>Computed value:
1374+
<td>see individual properties
1375+
</table>
1376+
1377+
<p>
1378+
The 'grid-template' property is a shorthand for setting
1379+
'grid-template-columns', 'grid-template-rows', and 'grid-template-areas' in a single declaration.
1380+
It has three distinct syntax forms:
1381+
1382+
<dl>
1383+
<dt><dfn>''none''</dfn>
1384+
<dd>
1385+
Sets all three properties to their initial values (''none'').
1386+
1387+
<dt><dfn><var>&lt;'grid-template-columns'></var> / <var>&lt;'grid-template-rows'></var></dfn>
1388+
<dd>
1389+
Sets 'grid-template-columns' and 'grid-template-rows' to the specified values, respectively,
1390+
and sets 'grid-template-areas' to ''none''.
1391+
1392+
<div class='example'>
1393+
<pre>grid-template: auto 1fr auto / auto 1fr;</pre>
1394+
1395+
<p>
1396+
is equivalent to
1397+
1398+
<pre>
1399+
grid-template-columns: auto 1fr auto;
1400+
grid-template-rows: auto 1fr;
1401+
grid-template-areas: none;</pre>
1402+
</div>
1403+
1404+
<dt><dfn>[ <var>&lt;'grid-template-columns'></var> / ]?<br>
1405+
[ <var>&lt;line-names></var>? <var>&lt;string></var> [ <var>&lt;track-size></var> <var>&lt;line-names></var> ]? ]+</dfn>
1406+
<dd>
1407+
<ul>
1408+
<li>
1409+
Sets 'grid-template-columns' to the track listing specified before the slash
1410+
(or ''none'', if not specified).
1411+
1412+
<li>
1413+
Sets 'grid-template-areas' to the strings listed after the slash.
1414+
1415+
<li>
1416+
Sets 'grid-template-rows' to the <var>&lt;track-size></var>s following each string
1417+
(filling in ''auto'' for any missing sizes),
1418+
and splicing in the named lines defined before/after each size.
1419+
</ul>
1420+
1421+
<p>
1422+
This syntax allows the author to align track names and sizes inline within the grid area syntax.
1423+
1424+
<div class='example'>
1425+
<pre>
1426+
grid-template: auto 1fr auto /
1427+
(header-top) "a a a" (header-bottom)
1428+
(main-top) "b b b" 1fr (main-bottom);</pre>
1429+
1430+
<p>
1431+
is equivalent to
1432+
1433+
<pre>
1434+
grid-template-columns: auto 1fr auto;
1435+
grid-template-rows: (header-top) auto (header-bottom main-top) 1fr (main-bottom);
1436+
grid-template-areas: "a a a"
1437+
"b b b";</pre>
1438+
</div>
1439+
</dl>
1440+
1441+
13371442
<h3 id='auto-tracks'>
13381443
Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-columns' properties</h3>
13391444

0 commit comments

Comments
 (0)