[css3-grid-layout] Define 'explicit grid', fill in the 'Defining the Grid' intro, add issue for naming.

Author: tabatkins

css3-grid-layout/Overview.html

@@ -1211,7 +1211,56 @@ <h3 id=visibility-collapse><span class=secno>4.3. </span> Collapsed Grid
 
   <h2 id=grid-definition><span class=secno>5. </span> Defining the Grid</h2>
 
-  <p class=issue> Fill in text.
+  <p> The three properties ‘<a href="#grid-definition-rows"><code
+   class=property>grid-definition-rows</code></a>’, ‘<a
+   href="#grid-definition-columns"><code
+   class=property>grid-definition-columns</code></a>’, and ‘<a
+   href="#grid-template"><code class=property>grid-template</code></a>’
+   together define the <dfn id=explicit-grid>explicit grid</dfn> of a <a
+   href="#grid-container"><i>grid container</i></a>. The final grid may end
+   up larger due to <a href="#grid-item"><i>grid items</i></a> placed outside
+   the <a href="#explicit-grid"><i>explicit grid</i></a>; in this case, any
+   implicit tracks are sized by the ‘<a href="#grid-auto-rows"><code
+   class=property>grid-auto-rows</code></a>’ and ‘<a
+   href="#grid-auto-columns"><code
+   class=property>grid-auto-columns</code></a>’ properties.
+
+  <p> The size of the <a href="#explicit-grid"><i>explicit grid</i></a> is
+   determined by the larger of the number of rows/columns defined by ‘<a
+   href="#grid-template"><code class=property>grid-template</code></a>’ and
+   the number of rows/columns sized by ‘<a
+   href="#grid-definition-rows"><code
+   class=property>grid-definition-rows</code></a>’/‘<a
+   href="#grid-definition-columns"><code
+   class=property>grid-definition-columns</code></a>’. Any rows/columns
+   defined by ‘<a href="#grid-template"><code
+   class=property>grid-template</code></a>’ but not sized by ‘<a
+   href="#grid-definition-rows"><code
+   class=property>grid-definition-rows</code></a>’/‘<a
+   href="#grid-definition-columns"><code
+   class=property>grid-definition-columns</code></a>’ take their size from
+   the ‘<a href="#grid-auto-rows"><code
+   class=property>grid-auto-rows</code></a>’/‘<a
+   href="#grid-auto-columns"><code
+   class=property>grid-auto-columns</code></a>’ properties.
+
+  <p> Numeric indexes in the <a
+   href="#grid-placement-properties"><i>grid-placement properties</i></a>
+   count from the edges of the <a href="#explicit-grid"><i>explicit
+   grid</i></a>. Positive indexes count from the before/start side, while
+   negative indexes count from the after/end side.
+
+  <p class=issue> Since all three properties define the explicit grid, would
+   it make sense to give them all a common prefix (and possibly a shorthand
+   unifying them, as in <a
+   href="http://dev.w3.org/csswg/css3-layout/#grid-shorthand">Bert's ‘<code
+   class=property>grid</code>’ shorthand</a>)? Current thoughts: ‘<a
+   href="#grid-template"><code class=property>grid-template</code></a>’ as
+   the shorthand, with ‘<code
+   class=css>grid-template-rows/columns/slots</code>’ as the longhands, or
+   ‘<code class=property>grid-definition</code>’ as the shorthand, with
+   ‘<code class=css>grid-definition-rows/columns/template</code>’ as the
+   longhands. Other suggestions welcome.
 
   <h3 id=track-sizing><span class=secno>5.1. </span> Track Sizing: the ‘<a
    href="#grid-definition-rows"><code
@@ -1906,10 +1955,11 @@ <h3 id=line-placement><span class=secno>6.1. </span> Line-based Placement:
    <dd> Specifies that the corresponding edge of the item's <a
     href="#grid-area"><i>grid area</i></a> is the <var>N</var>th <a
     href="#grid-line"><i>grid line</i></a> from the before/start edge of the
-    <i>explicit grid</i>. If a negative integer is given, it instead counts
-    in reverse, starting from the after/end edge of the <i>explicit grid</i>.
-    If a name is given as a <var>&lt;string></var>, only lines with that name
-    are considered. If the <var>&lt;integer></var> is omitted, it defaults to
+    <a href="#explicit-grid"><i>explicit grid</i></a>. If a negative integer
+    is given, it instead counts in reverse, starting from the after/end edge
+    of the <a href="#explicit-grid"><i>explicit grid</i></a>. If a name is
+    given as a <var>&lt;string></var>, only lines with that name are
+    considered. If the <var>&lt;integer></var> is omitted, it defaults to
     ‘<code class=css>1</code>’. A value of zero makes the declaration
     invalid.
 
@@ -3730,6 +3780,9 @@ <h2 class=no-num id=index> Index</h2>
    <li>DistributeSpaceToTracks, <a href="#function-DistributeSpaceToTracks"
     title="section 8.2."><strong>8.2.</strong></a>
 
+   <li>explicit grid, <a href="#explicit-grid"
+    title="section 5."><strong>5.</strong></a>
+
    <li><var>&lt;flex></var>, <a href="#ltflex"
     title="section 5.1."><strong>5.1.</strong></a>
 

css3-grid-layout/Overview.src.html

@@ -876,8 +876,33 @@ <h3 id="visibility-collapse">
 <h2 id='grid-definition'>
 Defining the Grid</h2>
 
+	<p>
+		The three properties 'grid-definition-rows', 'grid-definition-columns', and 'grid-template'
+		together define the <dfn>explicit grid</dfn> of a <i>grid container</i>.
+		The final grid may end up larger due to <i>grid items</i> placed outside the <i>explicit grid</i>;
+		in this case, any implicit tracks are sized by the 'grid-auto-rows' and 'grid-auto-columns' properties.
+
+	<p>
+		The size of the <i>explicit grid</i> is determined by the larger of 
+		the number of rows/columns defined by 'grid-template'
+		and the number of rows/columns sized by 'grid-definition-rows'/'grid-definition-columns'.
+		Any rows/columns defined by 'grid-template' but not sized by 'grid-definition-rows'/'grid-definition-columns'
+		take their size from the 'grid-auto-rows'/'grid-auto-columns' properties.
+
+	<p>
+		Numeric indexes in the <i>grid-placement properties</i>
+		count from the edges of the <i>explicit grid</i>.
+		Positive indexes count from the before/start side,
+		while negative indexes count from the after/end side.
+
 	<p class='issue'>
-		Fill in text.
+		Since all three properties define the explicit grid,
+		would it make sense to give them all a common prefix
+		(and possibly a shorthand unifying them, as in <a href="http://dev.w3.org/csswg/css3-layout/#grid-shorthand">Bert's 'grid' shorthand</a>)?
+		Current thoughts: 
+		'grid-template' as the shorthand, with 'grid-template-rows/columns/slots' as the longhands,
+		or 'grid-definition' as the shorthand, with 'grid-definition-rows/columns/template' as the longhands.
+		Other suggestions welcome.
 
 <h3 id='track-sizing'>
 Track Sizing: the 'grid-definition-rows' and 'grid-definition-columns' properties</h3>