[css-grid] Rename grid-auto-flow:rows|columns to row|column to match flex-flow, as suggested by Julian last year.

Author: tabatkins

css-grid/Overview.html

@@ -87,7 +87,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Grid Layout Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140122>22 January 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140124>24 January 2014</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-grid-1/>http://www.w3.org/TR/css-grid-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/ rel=previous>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/ rel=previous>http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-grid%5D%20feedback">www-style@w3.org</a>
@@ -849,7 +849,7 @@ <h2 class="heading settled heading" data-level=5 id=grid-definition><span class=
 <h3 class="heading settled heading" data-level=5.1 id=track-sizing><span class=secno>5.1 </span><span class=content>
 Track Sizing: the <a class=property data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>grid-template-rows</a> and <a class=property data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>grid-template-columns</a> properties</span><a class=self-link href=#track-sizing></a></h3>
 
-<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-columns>grid-template-columns<a class=self-link href=#propdef-grid-template-columns></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-rows>grid-template-rows<a class=self-link href=#propdef-grid-template-rows></a></dfn><tr><th>Value:<td>none | <a class="production css-code" data-link-type=type href=#typedef-track-list title="<track-list>">&lt;track-list&gt;</a> | subgrid <a class="production css-code" data-link-type=type href=#typedef-line-name-list title="<line-name-list>">&lt;line-name-list&gt;</a>?<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified, except for <a class=css-code data-link-for=grid-template-columns data-link-type=value href=#valuedef-auto title=auto>auto</a> (see prose), with lengths made absolute<tr><th>Percentages:<td>see prose</table>
+<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-columns>grid-template-columns<a class=self-link href=#propdef-grid-template-columns></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-rows>grid-template-rows<a class=self-link href=#propdef-grid-template-rows></a></dfn><tr><th>Value:<td>none | <a class="production css-code" data-link-type=type href=#typedef-track-list title="<track-list>">&lt;track-list&gt;</a> | subgrid <a class="production css-code" data-link-type=type href=#typedef-line-name-list title="<line-name-list>">&lt;line-name-list&gt;</a>?<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified, except for <a class=css data-link-for=grid-template-columns data-link-type=maybe href=#valuedef-auto title=auto>auto</a> (see prose), with lengths made absolute<tr><th>Percentages:<td>see prose</table>
 	<p>
 		These properties specify,
 		as a space-separated <dfn data-dfn-type=dfn data-export="" id=track-list>track list<a class=self-link href=#track-list></a></dfn>,
@@ -926,7 +926,7 @@ <h3 class="heading settled heading" data-level=5.1 id=track-sizing><span class=s
 		Rather than specifying the sizes of rows/columns explicitly,
 		they’ll be taken from the parent grid’s definition.
 		If the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is not a <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>,
-		this value computes to <a class=css-code data-link-for=grid-template-rows data-link-type=value href=#valuedef-none0 title=none>none</a>.
+		this value computes to <a class=css data-link-for=grid-template-rows data-link-type=maybe href=#valuedef-none0 title=none>none</a>.
 		See the <a href=#subgrids>Subgrids</a> section for more detail.
 
 	<div class=example>
@@ -1116,7 +1116,7 @@ <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=sec
 
 		<pre>ul {
   display: grid;
-  grid-auto-flow: rows;
+  grid-auto-flow: row;
   grid-template-columns: auto 1fr;
 }
 li {
@@ -1524,7 +1524,7 @@ <h3 class="heading settled heading" data-level=6.1 id=auto-tracks><span class=se
 <h3 class="heading settled heading" data-level=6.2 id=grid-auto-flow-property><span class=secno>6.2 </span><span class=content>
 Automatic Placement: the <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a> property</span><a class=self-link href=#grid-auto-flow-property></a></h3>
 
-<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-flow>grid-auto-flow<a class=self-link href=#propdef-grid-auto-flow></a></dfn><tr><th>Value:<td>none | [ [ rows | columns ] &amp;&amp; dense? ]<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
+<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-flow>grid-auto-flow<a class=self-link href=#propdef-grid-auto-flow></a></dfn><tr><th>Value:<td>none | [ [ row | column ] &amp;&amp; dense? ]<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
 	<p>
 		<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> that aren’t explicitly placed are automatically placed into an unoccupied space in the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
 		The <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a> property controls the direction in which the search for unoccupied space takes place,
@@ -1536,13 +1536,13 @@ <h3 class="heading settled heading" data-level=6.2 id=grid-auto-flow-property><s
 			Rather than use the auto-placement algorithm,
 			auto-placed <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> are simply positioned according to the <a class=property data-link-type=propdesc href=#propdef-grid-auto-position title=grid-auto-position>grid-auto-position</a> property.
 
-		<dt><dfn class=css-code data-dfn-for=grid-auto-flow data-dfn-type=value data-export="" id=valuedef-rows>rows<a class=self-link href=#valuedef-rows></a></dfn>
+		<dt><dfn class=css-code data-dfn-for=grid-auto-flow data-dfn-type=value data-export="" id=valuedef-row>row<a class=self-link href=#valuedef-row></a></dfn>
 		<dd>
 			The <a data-link-type=dfn href=#auto-placement title="auto-placement algorithm">auto-placement algorithm</a> places items
 			by filling each row in turn,
 			adding new rows as necessary.
 
-		<dt><dfn class=css-code data-dfn-for=grid-auto-flow data-dfn-type=value data-export="" id=valuedef-columns>columns<a class=self-link href=#valuedef-columns></a></dfn>
+		<dt><dfn class=css-code data-dfn-for=grid-auto-flow data-dfn-type=value data-export="" id=valuedef-column>column<a class=self-link href=#valuedef-column></a></dfn>
 		<dd>
 			The <a data-link-type=dfn href=#auto-placement title="auto-placement algorithm">auto-placement algorithm</a> places items
 			by filling each column in turn,
@@ -1560,8 +1560,8 @@ <h3 class="heading settled heading" data-level=6.2 id=grid-auto-flow-property><s
 
 <p class=note>	Note: A future level of this module is expected to add a value that flows auto-positioned items together into a single “default” cell.
 
-	<p class=issue id=issue-9dfd0726><a class=self-link href=#issue-9dfd0726></a>
-		Win8 compat might require the <a class=css-code data-link-for=grid-auto-flow data-link-type=value href=#valuedef-none title=none>none</a> value to stay the initial value,
+	<p class=issue id=issue-f18fa3f5><a class=self-link href=#issue-f18fa3f5></a>
+		Win8 compat might require the <a class=css data-link-for=grid-auto-flow data-link-type=maybe href=#valuedef-none title=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.
 		See <a href=http://lists.w3.org/Archives/Public/www-archive/2013Aug/0024.html>proposals to address this</a>
@@ -1574,7 +1574,7 @@ <h3 class="heading settled heading" data-level=6.2 id=grid-auto-flow-property><s
 		<p>
 			In the following example, there are three columns, each auto-sized to their contents.
 			No rows are explicitly defined.
-			The <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a> property is <a class=css-code data-link-for=grid-auto-flow data-link-type=value href=#valuedef-rows title=rows>rows</a>
+			The <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a> property is <a class=css data-link-for=grid-auto-flow data-link-type=maybe href=#valuedef-row title=row>row</a>
 			which instructs the grid to search across its three columns starting with the first row,
 			then the next,
 			adding rows as needed until sufficient space is located to accommodate the position of any auto-placed <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>.
@@ -1592,7 +1592,7 @@ <h3 class="heading settled heading" data-level=6.2 id=grid-auto-flow-property><s
     /* Define three columns, all content-sized,
        and name the corresponding lines. */
     grid-template-columns: (labels) auto (controls) auto (oversized) auto;
-    grid-auto-flow: rows;
+    grid-auto-flow: row;
   }
   form &gt; label {
     /* Place all labels in the "labels" column and
@@ -1667,8 +1667,8 @@ <h4 class="heading settled heading" data-level=6.2.1 id=auto-placement-algo><spa
 <p>	The following <dfn data-dfn-type=dfn data-export="" id=auto-placement title="auto-placement|auto-placement algorithm">auto-placement algorithm<a class=self-link href=#auto-placement></a></dfn> places <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> with <a data-link-type=dfn href=#automatic-grid-position title="automatic grid positions">automatic grid positions</a> into a <a data-link-type=dfn href=#definite-grid-position title="definite grid position">definite grid position</a>.
 
 <p>	To aid in clarity,
-	this algorithm is written with the assumption that <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a> is set to <a class=css-code data-link-for=grid-auto-flow data-link-type=value href=#valuedef-rows title=rows>rows</a>.
-	If it is instead set to <a class=css-code data-link-for=grid-auto-flow data-link-type=value href=#valuedef-columns title=columns>columns</a>,
+	this algorithm is written with the assumption that <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a> is set to <a class=css data-link-for=grid-auto-flow data-link-type=maybe href=#valuedef-row title=row>row</a>.
+	If it is instead set to <a class=css data-link-for=grid-auto-flow data-link-type=maybe href=#valuedef-column title=column>column</a>,
 	swap all mentions of rows and columns in this algorithm.
 
 <p>	For the purpose of this algorithm,
@@ -1721,7 +1721,7 @@ <h4 class="heading settled heading" data-level=6.2.1 id=auto-placement-algo><spa
 				<pre class=css>  #grid {
     display: grid;
     grid-template-columns: repeat(5, 100px);
-    grid-auto-flow: rows;
+    grid-auto-flow: row;
   }
   #grid-item {
     grid-column: 4 / span 3;
@@ -1826,11 +1826,11 @@ <h2 class="heading settled heading" data-level=7 id=grid-shorthand><span class=s
 		<pre>grid-template: none;
 grid-auto-columns: 1fr;
 grid-auto-rows: 1fr;
-grid-auto-flow: rows;</pre>		<p>Similarly, <a class=css data-link-type=propdesc href=#propdef-grid title=grid>grid: columns 1fr / auto</a> is equivalent to
+grid-auto-flow: row;</pre>		<p>Similarly, <a class=css data-link-type=propdesc href=#propdef-grid title=grid>grid: columns 1fr / auto</a> is equivalent to
 		<pre>grid-template: none;
 grid-auto-columns: 1fr;
 grid-auto-rows: auto;
-grid-auto-flow: columns;</pre>	</div>
+grid-auto-flow: column;</pre>	</div>
 
 <h2 class="heading settled heading" data-level=8 id=placement><span class=secno>8 </span><span class=content>
 Placing Grid Items</span><a class=self-link href=#placement></a></h2>
@@ -3189,9 +3189,9 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>auto-placement algorithm, <a href=#auto-placement title="section 6.2.1">6.2.1</a>
 <li>auto-placement cursor, <a href=#auto-placement-cursor title="section 6.2.1">6.2.1</a>
 <li>AvailableSpace, <a href=#AvailableSpace-definition title="section 10.1">10.1</a>
-<li>column, <a href=#grid-column- title="section 2">2</a>
-<li>column axis, <a href=#column-axis title="section 2">2</a>
-<li>columns, <a href=#valuedef-columns title="section 6.2">6.2</a>
+<li>column<ul><li>definition of, <a href=#grid-column- title="section 2">2</a>
+<li>value for grid-auto-flow, <a href=#valuedef-column title="section 6.2">6.2</a>
+</ul><li>column axis, <a href=#column-axis title="section 2">2</a>
 <li>&lt;custom-ident&gt;, <a href=#grid-placement-slot title="section 8.2">8.2</a>
 <li>definite column position, <a href=#definite-grid-position title="section 8">8</a>
 <li>definite column span, <a href=#definite-grid-span title="section 8">8</a>
@@ -3275,9 +3275,9 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>placement, <a href=#grid-placement title="section 8">8</a>
 <li>RemainingSpace, <a href=#RemainingSpace-definition title="section 10.1">10.1</a>
 <li>repeat(), <a href=#funcdef-repeat title="section 5.1.2">5.1.2</a>
-<li>row, <a href=#grid-row- title="section 2">2</a>
-<li>row axis, <a href=#row-axis title="section 2">2</a>
-<li>rows, <a href=#valuedef-rows title="section 6.2">6.2</a>
+<li>row<ul><li>definition of, <a href=#grid-row- title="section 2">2</a>
+<li>value for grid-auto-flow, <a href=#valuedef-row title="section 6.2">6.2</a>
+</ul><li>row axis, <a href=#row-axis title="section 2">2</a>
 <li>sizing function, <a href=#sizing-function title="section 5.1">5.1</a>
 <li>SpanCount, <a href=#SpanCount-definition title="section 10.1">10.1</a>
 <li>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ], <a href=#grid-placement-span-int title="section 8.2">8.2</a>
@@ -3303,7 +3303,7 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
 <tr><th scope=row><a data-property="">grid-template</a><td>none | subgrid | &lt;‘grid-template-columns’&gt; / &lt;‘grid-template-rows’&gt; | [ &lt;track-list&gt; / ]? [ &lt;line-names&gt;? &lt;string&gt; [ &lt;track-size&gt; &lt;line-names&gt; ]? ]+<td>see individual properties<td>grid containers<td>see individual properties<td>see individual properties<td>visual<td>see individual properties
 <tr><th scope=row><a data-property="">grid-auto-columns</a><td>&lt;track-size&gt;<td>auto<td>grid containers<td>no<td>see Track Sizing<td>visual<td>see Track Sizing
 <tr><th scope=row><a data-property="">grid-auto-rows</a><td>&lt;track-size&gt;<td>auto<td>grid containers<td>no<td>see Track Sizing<td>visual<td>see Track Sizing
-<tr><th scope=row><a data-property="">grid-auto-flow</a><td>none | [ [ rows | columns ] &amp;&amp; dense? ]<td>none<td>grid containers<td>no<td>n/a<td>visual<td>specified value
+<tr><th scope=row><a data-property="">grid-auto-flow</a><td>none | [ [ row | column ] &amp;&amp; dense? ]<td>none<td>grid containers<td>no<td>n/a<td>visual<td>specified value
 <tr><th scope=row><a data-property="">grid-auto-position</a><td>&lt;grid-line&gt; / &lt;grid-line&gt;<td>1 / 1<td>grid containers<td>no<td>n/a<td>visual<td>specified value
 <tr><th scope=row><a data-property="">grid</a><td>&lt;‘grid-template’&gt; | &lt;‘grid-auto-flow’&gt; [ &lt;‘grid-auto-columns’&gt; [ / &lt;‘grid-auto-rows’&gt; ]? ]<td>see individual properties<td>grid containers<td>see individual properties<td>see individual properties<td>visual<td>see individual properties
 <tr><th scope=row><a data-property="">grid-row-start</a><td>&lt;grid-line&gt;<td>auto<td>grid items<td>no<td>n/a<td>visual<td>specified value
@@ -3327,13 +3327,13 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 		as a joiner between repetitions.
 
 <a href=#issue-476380d2> ↵ </a></div><div class=issue>
-		Win8 compat might require the <a class=css-code data-link-for=grid-auto-flow data-link-type=value href=#valuedef-none title=none>none</a> value to stay the initial value,
+		Win8 compat might require the <a class=css data-link-for=grid-auto-flow data-link-type=maybe href=#valuedef-none title=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.
 		See <a href=http://lists.w3.org/Archives/Public/www-archive/2013Aug/0024.html>proposals to address this</a>
 		while addressing use cases and back-compat.
 
-	<a href=#issue-9dfd0726> ↵ </a></div><div class=issue>
+	<a href=#issue-f18fa3f5> ↵ </a></div><div class=issue>
 		These properties might not be necessary in this level,
 		if we can provide a more reasonable default behavior
 		by, e.g., searching for an empty slot to stack items into