[css-grid] Fix some wording, fix grammar error in 'grid' shorthand, add issue for making ''grid: subgrid'' valid.

Author: fantasai

css-grid/Overview.html

@@ -1076,7 +1076,7 @@ <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=sec
 	<p>
 		A <a href=#subgrid>subgrid</a> behaves just like a normal <a href=#grid-container>grid container</a> except that:
 
-<p>	<ul>
+<p>	<ul style="list-style-type: lower-alpha">
 		<li>
 			The number of explicit tracks is given by its <a href=#grid-span>grid span</a>,
 			rather than by <a class=property data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>grid-template-rows</a>/<a class=property data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>grid-template-columns</a>.
@@ -1114,11 +1114,11 @@ <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=sec
 
 		<li>
 			Explicit named lines can also be specified together with the <a data-link-type=value href=#valuedef-subgrid>subgrid</a> keyword;
-			these names apply to the corresponding lines taken from the parent <a href=#grid>grid</a>.
+			these names apply (within the <a href=#subgrid>subgrid</a>) to the corresponding lines of the parent <a href=#grid>grid</a>.
 			If the <a href=#subgrid>subgrid</a> has an explicit <a href=#grid-span>grid span</a>,
 			any names specified for lines beyond the span are ignored.
 			If the <a href=#subgrid>subgrid</a> has an explicit <a href=#grid-position>grid position</a> as well as an explicit <a href=#grid-span>grid span</a>,
-			it also automatically receives the names of the lines that it covers in its parent <a href=#grid>grid</a>.
+			it also automatically receives the line names specified for its parent <a href=#grid>grid</a>.
 	</ul>
 
 	<div class=example>
@@ -1139,7 +1139,8 @@ <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=sec
   grid-template-columns: auto 1fr;
 }
 li {
-  display: subgrid;
+  display: grid;
+  grid: subgrid / subgrid;
   margin: 0.5em;
   border: solid;
   padding: 0.5em;
@@ -1358,6 +1359,9 @@ <h3 class="heading settled heading" data-level=5.3 id=explicit-grid-shorthand><s
 	Unless authors want those to cascade in separately,
 	it is therefore recommended to use <a class=property data-link-type=propdesc href=#propdef-grid title=grid>grid</a> instead of <a class=property data-link-type=propdesc href=#propdef-grid-template title=grid-template>grid-template</a>.
 
+	<p class=issue id=issue-b47dff3b><a class=self-link href=#issue-b47dff3b></a>Would be nice if <a class=css data-link-type=maybe href=#propdef-grid title=grid>grid: subgrid</a> just worked.
+	Investigate tweaking grammar for that.
+
 <h2 class="heading settled heading" data-level=6 id=implicit-grids><span class=secno>6 </span><span class=content>
 The Implicit Grid</span><a class=self-link href=#implicit-grids></a></h2>
 
@@ -1708,7 +1712,7 @@ <h3 class="heading settled heading" data-level=6.3 id=grid-auto-position-propert
 <h2 class="heading settled heading" data-level=7 id=grid-shorthand><span class=secno>7 </span><span class=content>
 Grid Definition Shorthand: the <a class=property data-link-type=propdesc href=#propdef-grid title=grid>grid</a> property</span><a class=self-link href=#grid-shorthand></a></h2>
 
-<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-grid>grid<a class=self-link href=#propdef-grid></a></dfn><tr><th>Value:<td><a class=production data-link-type=propdesc href=#propdef-grid-template title=grid-template>&lt;‘grid-template’&gt;</a> | <a class=production data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>&lt;‘grid-auto-flow’&gt;</a> || [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns>&lt;‘grid-auto-columns’&gt;</a> [ / <a class=production data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows>&lt;‘grid-auto-rows’&gt;</a> ]? ]<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a href=#grid-container>grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
+<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-grid>grid<a class=self-link href=#propdef-grid></a></dfn><tr><th>Value:<td><a class=production data-link-type=propdesc href=#propdef-grid-template title=grid-template>&lt;‘grid-template’&gt;</a> | <a class=production data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>&lt;‘grid-auto-flow’&gt;</a> [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns>&lt;‘grid-auto-columns’&gt;</a> [ / <a class=production data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows>&lt;‘grid-auto-rows’&gt;</a> ]? ]<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a href=#grid-container>grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
 	<p>
 		The <a class=property data-link-type=propdesc href=#propdef-grid title=grid>grid</a> property is a shorthand that sets
 		all of the explicit grid properties
@@ -1723,7 +1727,7 @@ <h2 class="heading settled heading" data-level=7 id=grid-shorthand><span class=s
 	<div class=example>
 		<p>In addition to accepting the <a class=property data-link-type=propdesc href=#propdef-grid-template title=grid-template>grid-template</a> shorthand syntax for setting up the <a href=#explicit-grid>explicit grid</a>,
 		the <a class=property data-link-type=propdesc href=#propdef-grid title=grid>grid</a> shorthand can also easily set up parameters for an auto-formatted grid.
-		For example, <a class=css data-link-type=maybe href=#propdef-grid title=grid>grid: 1fr;</a> is equivalent to
+		For example, <a class=css data-link-type=maybe href=#propdef-grid title=grid>grid: rows 1fr;</a> is equivalent to
 		<pre>grid-template: none;
 grid-auto-columns: 1fr;
 grid-auto-rows: 1fr;
@@ -2924,7 +2928,7 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
 <tr><th scope=row><a data-property="">grid-auto-rows</a><td><a class=production data-link-type=type href=#typedef-track-size>&lt;track-size&gt;</a><td>auto<td><td>no<td>see <a href=#track-sizing>Track Sizing</a><td>visual<td><a href=#grid-container>grid containers</a><td>see <a href=#track-sizing>Track Sizing</a><td>
 <tr><th scope=row><a data-property="">grid-auto-flow</a><td>none | [ [ rows | columns ] &amp;&amp; dense? ]<td>none<td><td>no<td>n/a<td>visual<td><a href=#grid-container>grid containers</a><td>specified value<td>
 <tr><th scope=row><a data-property="">grid-auto-position</a><td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a> / <a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><td>1 / 1<td><td>no<td>na/<td>visual<td><a href=#grid-container>grid containers</a><td>specified value<td>
-<tr><th scope=row><a data-property="">grid</a><td><a class=production data-link-type=propdesc href=#propdef-grid-template title=grid-template>&lt;‘grid-template’&gt;</a> | <a class=production data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>&lt;‘grid-auto-flow’&gt;</a> || [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns>&lt;‘grid-auto-columns’&gt;</a> [ / <a class=production data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows>&lt;‘grid-auto-rows’&gt;</a> ]? ]<td>see individual properties<td><td>see individual properties<td>see individual properties<td>visual<td><a href=#grid-container>grid containers</a><td>see individual properties<td>
+<tr><th scope=row><a data-property="">grid</a><td><a class=production data-link-type=propdesc href=#propdef-grid-template title=grid-template>&lt;‘grid-template’&gt;</a> | <a class=production data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>&lt;‘grid-auto-flow’&gt;</a> [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns>&lt;‘grid-auto-columns’&gt;</a> [ / <a class=production data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows>&lt;‘grid-auto-rows’&gt;</a> ]? ]<td>see individual properties<td><td>see individual properties<td>see individual properties<td>visual<td><a href=#grid-container>grid containers</a><td>see individual properties<td>
 <tr><th scope=row><a data-property="">grid-row-start</a><td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><td>auto<td><td>no<td>n/a<td>visual<td><a href=#grid-item>grid items</a><td>specified value (almost)<td>
 <tr><th scope=row><a data-property="">grid-column-start</a><td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><td>auto<td><td>no<td>n/a<td>visual<td><a href=#grid-item>grid items</a><td>specified value (almost)<td>
 <tr><th scope=row><a data-property="">grid-row-end</a><td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><td>auto<td><td>no<td>n/a<td>visual<td><a href=#grid-item>grid items</a><td>specified value (almost)<td>
@@ -2947,7 +2951,10 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
 	<a href=#issue-10e57cb7> ↵ </a><p class=issue>
 		Make sure Flexbox and Grid Layout have consistent models for static position.
 
-<a href=#issue-cc903511> ↵ </a><p class=issue>
+<a href=#issue-cc903511> ↵ </a><p class=issue>Would be nice if <a class=css data-link-type=maybe href=#propdef-grid title=grid>grid: subgrid</a> just worked.
+	Investigate tweaking grammar for that.
+
+<a href=#issue-b47dff3b> ↵ </a><p class=issue>
 		Win8 compat might require the <a data-link-for=grid-auto-flow data-link-type=value href=#valuedef-none>none</a> value to stay the initial value,
 		but it’s not a very good value,
 		because by default the entire contents of a grid container will end up stacked on top of each other.

css-grid/Overview.src.html

@@ -1046,11 +1046,11 @@ <h4 id="subgrids">
 
 		<li>
 			Explicit named lines can also be specified together with the <a value>subgrid</a> keyword;
-			these names apply to the corresponding lines taken from the parent <a>grid</a>.
+			these names apply (within the <a>subgrid</a>) to the corresponding lines of the parent <a>grid</a>.
 			If the <a>subgrid</a> has an explicit <a>grid span</a>,
 			any names specified for lines beyond the span are ignored.
 			If the <a>subgrid</a> has an explicit <a>grid position</a> as well as an explicit <a>grid span</a>,
-			it also automatically receives the names of the lines that it covers in its parent <a>grid</a>.
+			it also automatically receives the line names specified for its parent <a>grid</a>.
 	</ul>
 
 	<div class="example">
@@ -1326,6 +1326,9 @@ <h3 id='explicit-grid-shorthand'>
 	Unless authors want those to cascade in separately,
 	it is therefore recommended to use 'grid' instead of 'grid-template'.
 
+	<p class="issue">Would be nice if ''grid: subgrid'' just worked.
+	Investigate tweaking grammar for that.
+
 <h2 id='implicit-grids'>
 The Implicit Grid</h2>
 
@@ -1714,7 +1717,7 @@ <h2 id='grid-shorthand'>
 
 	<pre class='propdef'>
 	Name: grid
-	Value: <<'grid-template'>> | <<'grid-auto-flow'>> || [ <<'grid-auto-columns'>> [ / <<'grid-auto-rows'>> ]? ]
+	Value: <<'grid-template'>> | <<'grid-auto-flow'>> [ <<'grid-auto-columns'>> [ / <<'grid-auto-rows'>> ]? ]
 	Initial: see individual properties
 	Applies to: <a>grid containers</a>
 	Inherited: see individual properties
@@ -1737,7 +1740,7 @@ <h2 id='grid-shorthand'>
 	<div class='example'>
 		<p>In addition to accepting the 'grid-template' shorthand syntax for setting up the <i>explicit grid</i>,
 		the 'grid' shorthand can also easily set up parameters for an auto-formatted grid.
-		For example, ''grid: 1fr;'' is equivalent to
+		For example, ''grid: rows 1fr;'' is equivalent to
 		<pre>
 grid-template: none;
 grid-auto-columns: 1fr;