[css-grid] Add grid-placement properties summary table.

--HG--
extra : rebase_source : 359a24366c8d84ee1a783a3b40cf263a69e1e517

Author: tabatkins

css-grid/Overview.html

@@ -122,9 +122,10 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 Automatic Grid Item Placement Algorithm</a></ul><li><a href=#grid-auto-position-property><span class=secno>6.3</span>
 Default Position: the <span class=property data-link-type=propdesc title=grid-auto-position>grid-auto-position</span> property</a></ul><li><a href=#grid-shorthand><span class=secno>7</span>
 Grid Definition Shorthand: the <span class=property data-link-type=propdesc title=grid>grid</span> property</a><li><a href=#placement><span class=secno>8</span>
-Placing Grid Items</a><ul class=toc><li><a href=#line-placement><span class=secno>8.1</span>
-Line-based Placement: the <span class=property data-link-type=propdesc title=grid-row-start>grid-row-start</span>, <span class=property data-link-type=propdesc title=grid-column-start>grid-column-start</span>, <span class=property data-link-type=propdesc title=grid-row-end>grid-row-end</span>, and <span class=property data-link-type=propdesc title=grid-column-end>grid-column-end</span> properties</a><ul class=toc><li><a href=#grid-placement-errors><span class=secno>8.1.1</span>
-Grid Placement Error Handling</a></ul><li><a href=#placement-shorthands><span class=secno>8.2</span>
+Placing Grid Items</a><ul class=toc><li><a href=#common-uses><span class=secno>8.1</span>
+Common Values for Grid Placement</a><li><a href=#line-placement><span class=secno>8.2</span>
+Line-based Placement: the <span class=property data-link-type=propdesc title=grid-row-start>grid-row-start</span>, <span class=property data-link-type=propdesc title=grid-column-start>grid-column-start</span>, <span class=property data-link-type=propdesc title=grid-row-end>grid-row-end</span>, and <span class=property data-link-type=propdesc title=grid-column-end>grid-column-end</span> properties</a><ul class=toc><li><a href=#grid-placement-errors><span class=secno>8.2.1</span>
+Grid Placement Error Handling</a></ul><li><a href=#placement-shorthands><span class=secno>8.3</span>
 Placement Shorthands: the <span class=property data-link-type=propdesc title=grid-column>grid-column</span>, <span class=property data-link-type=propdesc title=grid-row>grid-row</span>, and <span class=property data-link-type=propdesc title=grid-area>grid-area</span> properties</a></ul><li><a href=#abspos-items><span class=secno>9</span>
 Absolutely-positioned Grid Items</a><li><a href=#alignment><span class=secno>10</span>
 Alignment</a><ul class=toc><li><a href=#auto-margins><span class=secno>10.1</span>
@@ -1813,10 +1814,27 @@ <h2 class="heading settled heading" data-level=8 id=placement><span class=secno>
 				<td><a data-link-type=dfn href=#subgrid title=subgrid>Subgrid</a> without an explicit or implied span
 	</table>
 
-	<p class=issue id=issue-5b898f6f><a class=self-link href=#issue-5b898f6f></a>
-		Put in "common uses" section, like <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex title=flex>flex</a> has, to describe what you would use <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a> for, etc.
+<h3 class="heading settled heading" data-level=8.1 id=common-uses><span class=secno>8.1 </span><span class=content>
+Common Values for Grid Placement</span><a class=self-link href=#common-uses></a></h3>
 
-<h3 class="heading settled heading" data-level=8.1 id=line-placement><span class=secno>8.1 </span><span class=content>
+<p>	<em>This section is informative.</em>
+
+<p>	The <a data-link-type=dfn href=#grid-placement-property title="grid-placement property">grid-placement property</a> longhands are organized into three shorthands:
+
+	<table class=data rules=all>
+		<tr>
+			<td colspan=4><a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a>
+		<tr>
+			<td colspan=2><a class=property data-link-type=propdesc href=#propdef-grid-column title=grid-column>grid-column</a>
+			<td colspan=2><a class=property data-link-type=propdesc href=#propdef-grid-row title=grid-row>grid-row</a>
+		<tr>
+			<td width=25%><a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>
+			<td width=25%><a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a>
+			<td width=25%><a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>
+			<td width=25%><a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>
+	</table>
+
+<h3 class="heading settled heading" data-level=8.2 id=line-placement><span class=secno>8.2 </span><span class=content>
 Line-based Placement: the <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a> properties</span><a class=self-link href=#line-placement></a></h3>
 
 <table class=propdef><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row-start>grid-row-start<a class=self-link href=#propdef-grid-row-start></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column-start>grid-column-start<a class=self-link href=#propdef-grid-column-start></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row-end>grid-row-end<a class=self-link href=#propdef-grid-row-end></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column-end>grid-column-end<a class=self-link href=#propdef-grid-column-end></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-item title="grid items">grid items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value (almost)<tr><th>Percentages:<td>n/a</table>
@@ -1937,7 +1955,7 @@ <h3 class="heading settled heading" data-level=8.1 id=line-placement><span class
   /* Line 5 to line 6 */
 </pre>	</div>
 
-<h4 class="heading settled heading" data-level=8.1.1 id=grid-placement-errors><span class=secno>8.1.1 </span><span class=content>
+<h4 class="heading settled heading" data-level=8.2.1 id=grid-placement-errors><span class=secno>8.2.1 </span><span class=content>
 Grid Placement Error Handling</span><a class=self-link href=#grid-placement-errors></a></h4>
 
 <p>	If <a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>/<a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a> specifies a line at or before that specified by <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>/<a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>,
@@ -1952,7 +1970,7 @@ <h4 class="heading settled heading" data-level=8.1.1 id=grid-placement-errors><s
 	in a given dimension,
 	instead treat the <a data-link-type=dfn href=#grid-span title="grid span">grid span</a> as one.
 
-<h3 class="heading settled heading" data-level=8.2 id=placement-shorthands><span class=secno>8.2 </span><span class=content>
+<h3 class="heading settled heading" data-level=8.3 id=placement-shorthands><span class=secno>8.3 </span><span class=content>
 Placement Shorthands: the <a class=property data-link-type=propdesc href=#propdef-grid-column title=grid-column>grid-column</a>, <a class=property data-link-type=propdesc href=#propdef-grid-row title=grid-row>grid-row</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a> properties</span><a class=self-link href=#placement-shorthands></a></h3>
 
 <table class=propdef><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column>grid-column<a class=self-link href=#propdef-grid-column></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row>grid-row<a class=self-link href=#propdef-grid-row></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> [ / <a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> ]?<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-item title="grid items">grid items</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>
@@ -2867,7 +2885,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 Index</span><a class=self-link href=#index></a></h2>
 <div data-fill-with=index><ul class=indexlist>
 <li>auto<ul><li>value for grid-template-columns, grid-template-rows, <a href=#valuedef-auto title="section 5.1">5.1</a>
-<li>value for &lt;grid-line&gt;, <a href=#grid-placement-auto title="section 8.1">8.1</a>
+<li>value for &lt;grid-line&gt;, <a href=#grid-placement-auto title="section 8.2">8.2</a>
 </ul><li>automatic column position, <a href=#automatic-grid-positionautomatic-row-positionautomatic-column-positionautomatic-position title="section 8">8</a>
 <li>automatic column span, <a href=#automatic-grid-spanautomatic-row-spanautomatic-column-spanautomatic-span title="section 8">8</a>
 <li>automatic grid position, <a href=#automatic-grid-positionautomatic-row-positionautomatic-column-positionautomatic-position title="section 8">8</a>
@@ -2900,32 +2918,32 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>grid<ul><li>definition of, <a href=#grid title="section 2">2</a>
 <li>value for display, <a href=#valuedef-grid title="section 3.1">3.1</a>
 <li>(property), <a href=#propdef-grid title="section 7">7</a>
-</ul><li>grid-area, <a href=#propdef-grid-area title="section 8.2">8.2</a>
+</ul><li>grid-area, <a href=#propdef-grid-area title="section 8.3">8.3</a>
 <li>grid area, <a href=#grid-area title="section 2.3">2.3</a>
 <li>grid-auto-columns, <a href=#propdef-grid-auto-columns title="section 6.1">6.1</a>
 <li>grid-auto-flow, <a href=#propdef-grid-auto-flow title="section 6.2">6.2</a>
 <li>grid-auto-position, <a href=#propdef-grid-auto-position title="section 6.3">6.3</a>
 <li>grid-auto-rows, <a href=#propdef-grid-auto-rows title="section 6.1">6.1</a>
 <li>grid cell, <a href=#grid-cell title="section 2.1">2.1</a>
 <li>grid column, <a href=#grid-column--column title="section 2">2</a>
-<li>grid-column, <a href=#propdef-grid-column title="section 8.2">8.2</a>
-<li>grid-column-end, <a href=#propdef-grid-column-end title="section 8.1">8.1</a>
+<li>grid-column, <a href=#propdef-grid-column title="section 8.3">8.3</a>
+<li>grid-column-end, <a href=#propdef-grid-column-end title="section 8.2">8.2</a>
 <li>grid column line, <a href=#grid-line title="section 2.2">2.2</a>
-<li>grid-column-start, <a href=#propdef-grid-column-start title="section 8.1">8.1</a>
+<li>grid-column-start, <a href=#propdef-grid-column-start title="section 8.2">8.2</a>
 <li>grid container, <a href=#grid-container title="section 3.1">3.1</a>
 <li>grid formatting context, <a href=#grid-formatting-context title="section 3.1">3.1</a>
 <li>grid item, <a href=#grid-item title="section 4">4</a>
 <li>grid layout, <a href=#grid-layout title="section 2">2</a>
 <li>grid line, <a href=#grid-line title="section 2.2">2.2</a>
-<li>&lt;grid-line&gt;, <a href=#typedef-grid-line title="section 8.1">8.1</a>
+<li>&lt;grid-line&gt;, <a href=#typedef-grid-line title="section 8.2">8.2</a>
 <li>grid placement, <a href=#grid-placementplacement title="section 8">8</a>
 <li>grid-placement property, <a href=#grid-placement-property title="section 8">8</a>
 <li>grid position, <a href=#grid-position title="section 8">8</a>
 <li>grid row, <a href=#grid-row--row title="section 2">2</a>
-<li>grid-row, <a href=#propdef-grid-row title="section 8.2">8.2</a>
-<li>grid-row-end, <a href=#propdef-grid-row-end title="section 8.1">8.1</a>
+<li>grid-row, <a href=#propdef-grid-row title="section 8.3">8.3</a>
+<li>grid-row-end, <a href=#propdef-grid-row-end title="section 8.2">8.2</a>
 <li>grid row line, <a href=#grid-line title="section 2.2">2.2</a>
-<li>grid-row-start, <a href=#propdef-grid-row-start title="section 8.1">8.1</a>
+<li>grid-row-start, <a href=#propdef-grid-row-start title="section 8.2">8.2</a>
 <li>grid span, <a href=#grid-span title="section 8">8</a>
 <li>grid-template, <a href=#propdef-grid-template title="section 5.3">5.3</a>
 <li>grid-template-areas, <a href=#propdef-grid-template-areas title="section 5.2">5.2</a>
@@ -2934,15 +2952,15 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>grid-template-rows, <a href=#propdef-grid-template-rows title="section 5.1">5.1</a>
 <li>Grid track, <a href=#grid-track title="section 2.1">2.1</a>
 <li>hypothetical 1fr size, <a href=#hypothetical-1fr-size title="section 5.1.3">5.1.3</a>
-<li>&lt;ident&gt;, <a href=#grid-placement-slot title="section 8.1">8.1</a>
+<li>&lt;ident&gt;, <a href=#grid-placement-slot title="section 8.2">8.2</a>
 <li>implicit grid, <a href=#implicit-grid title="section 6">6</a>
 <li>implicit grid column, <a href=#implicit-grid-trackimplicit-grid-rowimplicit-grid-column title="section 6.1">6.1</a>
 <li>implicit grid row, <a href=#implicit-grid-trackimplicit-grid-rowimplicit-grid-column title="section 6.1">6.1</a>
 <li>implicit grid track, <a href=#implicit-grid-trackimplicit-grid-rowimplicit-grid-column title="section 6.1">6.1</a>
 <li>implicit named area, <a href=#implicit-named-area title="section 5.2.2">5.2.2</a>
 <li>implicit named line, <a href=#implicit-named-line title="section 5.2.1">5.2.1</a>
 <li>inline-grid, <a href=#valuedef-inline-grid title="section 3.1">3.1</a>
-<li>&lt;integer&gt; &amp;&amp; &lt;ident&gt;?, <a href=#grid-placement-int title="section 8.1">8.1</a>
+<li>&lt;integer&gt; &amp;&amp; &lt;ident&gt;?, <a href=#grid-placement-int title="section 8.2">8.2</a>
 <li>&lt;length&gt;, <a href=#valuedef-length title="section 5.1">5.1</a>
 <li>&lt;line-name-list&gt;, <a href=#typedef-line-name-list title="section 5.1">5.1</a>
 <li>&lt;line-names&gt;, <a href=#typedef-line-names title="section 5.1">5.1</a>
@@ -2969,7 +2987,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>rows, <a href=#valuedef-rows title="section 6.2">6.2</a>
 <li>sizing function, <a href=#sizing-function title="section 5.1">5.1</a>
 <li>SpanCount, <a href=#SpanCount-definition title="section 11.1">11.1</a>
-<li>span &amp;&amp; [ &lt;integer&gt; || &lt;ident&gt; ], <a href=#grid-placement-span-int title="section 8.1">8.1</a>
+<li>span &amp;&amp; [ &lt;integer&gt; || &lt;ident&gt; ], <a href=#grid-placement-span-int title="section 8.2">8.2</a>
 <li>&lt;string&gt;+, <a href=#valuedef-string title="section 5.2">5.2</a>
 <li>subgrid<ul><li>value for grid-template-rows, grid-template-columns, <a href=#valuedef-subgrid title="section 5.1">5.1</a>
 <li>definition of, <a href=#subgrid title="section 5.1.4">5.1.4</a>
@@ -3029,9 +3047,6 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 		instead of always using 1,1 by default.
 
 <a href=#issue-f3c0c9fd> ↵ </a><p class=issue>
-		Put in "common uses" section, like <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex title=flex>flex</a> has, to describe what you would use <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a> for, etc.
-
-<a href=#issue-5b898f6f> ↵ </a><p class=issue>
 		Should <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a> be <a class=property data-link-type=propdesc title=grid-field>grid-field</a>?
 
 

css-grid/Overview.src.html

@@ -1860,8 +1860,25 @@ <h2 id="placement">
 				<td><a>Subgrid</a> without an explicit or implied span
 	</table>
 
-	<p class='issue'>
-		Put in "common uses" section, like 'flex' has, to describe what you would use 'grid-area' for, etc.
+<h3 id='common-uses'>
+Common Values for Grid Placement</h3>
+
+	<em>This section is informative.</em>
+
+	The <a>grid-placement property</a> longhands are organized into three shorthands:
+
+	<table rules=all class=data>
+		<tr>
+			<td colspan=4>'grid-area'
+		<tr>
+			<td colspan=2>'grid-column'
+			<td colspan=2>'grid-row'
+		<tr>
+			<td width=25%>'grid-column-start'
+			<td width=25%>'grid-column-end'
+			<td width=25%>'grid-row-start'
+			<td width=25%>'grid-row-end'
+	</table>
 
 <h3 id='line-placement'>
 Line-based Placement: the 'grid-row-start', 'grid-column-start', 'grid-row-end', and 'grid-column-end' properties</h3>