[css-grid] Imply named lines from grid area names.

Author: tabatkins

css-grid/Overview.html

@@ -275,6 +275,10 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
      <li><a href="#grid-template-areas-property"><span class=secno>5.2.
       </span> Named Areas: the ‘<code
       class=property>grid-template-areas</code>’ property</a>
+      <ul class=toc>
+       <li><a href="#implicit-named-lines"><span class=secno>5.2.1. </span>
+        Implicit Named Lines</a>
+      </ul>
 
      <li><a href="#grid-template-property"><span class=secno>5.3. </span> The
       ‘<code class=property>grid-template</code>’ shorthand property</a>
@@ -1456,11 +1460,16 @@ <h4 id=named-lines><span class=secno>5.1.1. </span> Named Grid Lines</h4>
    ‘<a href="#grid-template-rows"><code
    class=property>grid-template-rows</code></a>’ and ‘<a
    href="#grid-template-columns"><code
-   class=property>grid-template-columns</code></a>’ properties. This can
+   class=property>grid-template-columns</code></a>’ properties, or <a
+   href="#implicit-named-lines">implicitly named</a> by creating <a
+   href="#named-grid-areas"><i>named grid areas</i></a> with the ‘<a
+   href="#grid-template-areas"><code
+   class=property>grid-template-areas</code></a>’ property. Named lines can
    make the <a href="#grid-placement-properties"><i>grid-placement
-   properties</i></a> easier to understand by using meaningful names in their
-   values, and easier to maintain if the grid definition changes in the
-   future.
+   properties</i></a> easier to understand by allowing meaningful names in
+   their values, and easier to maintain if the grid definition changes in the
+   future by tying a grid item’s position to a stable name rather than a
+   shifting numerical index.
 
   <div class=example>
    <p> For example, the following code gives meaningful names to all of the
@@ -1738,6 +1747,31 @@ <h3 id=grid-template-areas-property><span class=secno>5.2. </span> Named
 &lt;/style></pre>
   </div>
 
+  <h4 id=implicit-named-lines><span class=secno>5.2.1. </span> Implicit Named
+   Lines</h4>
+
+  <p> The ‘<a href="#grid-template-areas"><code
+   class=property>grid-template-areas</code></a>’ property creates <dfn
+   id=implicit-named-lines0 title="implicit named line">implicit named
+   lines</dfn> from the <a href="#named-grid-areas"><i>named grid
+   areas</i></a> in the template. For each <a
+   href="#named-grid-areas"><i>named grid area</i></a> <var>foo</var>, four
+   <a href="#implicit-named-lines0"><i>implicit named lines</i></a> are
+   created: two named ‘<code class=css><var>foo</var>-start</code>’,
+   naming the row-start and column-start lines of the <a
+   href="#named-grid-areas"><i>named grid area</i></a>, and two named
+   ‘<code class=css><var>foo</var>-end</code>’, naming the row-end and
+   column-end lines of the <a href="#named-grid-areas"><i>named grid
+   area</i></a>.
+
+  <p> These named lines behave just like any other named line, except that
+   they do not appear in the value of ‘<a href="#grid-template-rows"><code
+   class=property>grid-template-rows</code></a>’/‘<a
+   href="#grid-template-columns"><code
+   class=property>grid-template-columns</code></a>’. Even if an explicit
+   line of the same name is defined, the implicit named lines are just more
+   lines with the same name.
+
   <h3 id=grid-template-property><span class=secno>5.3. </span> The ‘<a
    href="#grid-template"><code class=property>grid-template</code></a>’
    shorthand property</h3>
@@ -3818,10 +3852,10 @@ <h3 class=no-num id=normative-references> Normative references</h3>
    <dt id=CSS3VAL>[CSS3VAL]
 
    <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
-    href="http://www.w3.org/TR/2013/CR-css3-values-20130404/"><cite>CSS
-    Values and Units Module Level 3.</cite></a> 4 April 2013. W3C Candidate
+    href="http://www.w3.org/TR/2013/CR-css3-values-20130730/"><cite>CSS
+    Values and Units Module Level 3.</cite></a> 30 July 2013. W3C Candidate
     Recommendation. (Work in progress.) URL: <a
-    href="http://www.w3.org/TR/2013/CR-css3-values-20130404/">http://www.w3.org/TR/2013/CR-css3-values-20130404/</a>
+    href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a>
    </dd>
    <!---->
 
@@ -4018,6 +4052,9 @@ <h2 class=no-num id=index> Index</h2>
    <li>implicit grid track, <a href="#implicit-grid-tracks"
     title="section 5.4."><strong>5.4.</strong></a>
 
+   <li>implicit named line, <a href="#implicit-named-lines0"
+    title="section 5.2.1."><strong>5.2.1.</strong></a>
+
    <li>‘<code class=css>inline-grid</code>’, <a
     href="#display-inline-grid"
     title="section 3.1."><strong>3.1.</strong></a>

css-grid/Overview.src.html

@@ -1056,10 +1056,12 @@ <h4 id='named-lines'>
 
 	<p>
 		While <i>grid lines</i> can always be referred to by their numerical index,
-		they can also be explicitly named in the 'grid-template-rows' and 'grid-template-columns' properties.
-		This can make the <i>grid-placement properties</i> easier to understand
-		by using meaningful names in their values,
-		and easier to maintain if the grid definition changes in the future.
+		they can also be explicitly named in the 'grid-template-rows' and 'grid-template-columns' properties,
+		or <a href="#implicit-named-lines">implicitly named</a> by creating <i>named grid areas</i> with the 'grid-template-areas' property.
+		Named lines can make the <i>grid-placement properties</i> easier to understand
+		by allowing meaningful names in their values,
+		and easier to maintain if the grid definition changes in the future
+		by tying a grid item’s position to a stable name rather than a shifting numerical index.
 
 	<div class='example'>
 		<p>
@@ -1321,6 +1323,20 @@ <h3 id="grid-template-areas-property">
 &lt;/style></pre>
 	</div>
 
+<h4 id="implicit-named-lines">
+Implicit Named Lines</h4>
+
+	<p>
+		The 'grid-template-areas' property creates <dfn title="implicit named line">implicit named lines</dfn> from the <i>named grid areas</i> in the template.
+		For each <i>named grid area</i> <var>foo</var>, four <i>implicit named lines</i> are created:
+		two named ''<var>foo</var>-start'', naming the row-start and column-start lines of the <i>named grid area</i>,
+		and two named ''<var>foo</var>-end'', naming the row-end and column-end lines of the <i>named grid area</i>.
+
+	<p>
+		These named lines behave just like any other named line,
+		except that they do not appear in the value of 'grid-template-rows'/'grid-template-columns'.
+		Even if an explicit line of the same name is defined,
+		the implicit named lines are just more lines with the same name.
 
 <h3 id='grid-template-property'>
 The 'grid-template' shorthand property</h3>