[css3-grid-layout] Wordsmithing the concepts section.

Author: tabatkins

css3-grid-layout/Overview.html

@@ -198,18 +198,15 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
       Grid Layering of Elements</a>
     </ul>
 
-   <li><a href="#grid-layout-box-model-and-terminology"><span class=secno>2.
-    </span>Grid Layout Box Model and Terminology</a>
+   <li><a href="#grid-concepts"><span class=secno>2. </span> Core Concepts of
+    the Grid</a>
     <ul class=toc>
-     <li><a href="#grid-rows-and-columns"><span class=secno>2.1. </span> Grid
-      Rows and Columns</a>
+     <li><a href="#grid-lines"><span class=secno>2.1. </span>Grid Lines</a>
 
-     <li><a href="#grid-lines"><span class=secno>2.2. </span>Grid Lines</a>
-
-     <li><a href="#grid-concepts-tracks"><span class=secno>2.3. </span> Grid
+     <li><a href="#grid-concepts-tracks"><span class=secno>2.2. </span> Grid
       Tracks</a>
 
-     <li><a href="#grid-areas"><span class=secno>2.4. </span>Grid Areas</a>
+     <li><a href="#grid-areas"><span class=secno>2.3. </span>Grid Areas</a>
     </ul>
 
    <li><a href="#grid-containers"><span class=secno>3. </span> Grid
@@ -264,7 +261,7 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
       and ‘<code class=property>grid-auto-columns</code>’ properties</a>
     </ul>
 
-   <li><a href="#placing-grid-items"><span class=secno>6. </span>Placing Grid
+   <li><a href="#placement"><span class=secno>6. </span> Placing Grid
     Items</a>
     <ul class=toc>
      <li><a href="#line-placement"><span class=secno>6.1. </span> Line-based
@@ -478,8 +475,8 @@ <h3 id=adapting-to-available-space><span class=secno>1.2. </span> Adapting
    href="#grid-definition-rows"><code
    class=property>grid-definition-rows</code></a>’ and ‘<a
    href="#grid-definition-columns"><code
-   class=property>grid-definition-columns</code></a>’ properties on the <a
-   href="#grid-container"><i>grid container</i></a>, and the ‘<code
+   class=property>grid-definition-columns</code></a>’ properties on the
+   <i>grid container</i>, and the ‘<code
    class=property>grid-row-position</code>’, ‘<code
    class=property>grid-column-position</code>’, ‘<code
    class=property>grid-row-span</code>’ and ‘<code
@@ -630,8 +627,8 @@ <h3 id=grid-layering-of-elements><span class=secno>1.4. </span> Grid
    By leveraging grid layout, the author can instead limit script usage to
    handling mouse events on the thumb, which snaps to various positions along
    the track as the ‘<a href="#grid-definition-columns"><code
-   class=property>grid-definition-columns</code></a>’ property of the <a
-   href="#grid-container"><i>grid container</i></a> is updated.
+   class=property>grid-definition-columns</code></a>’ property of the
+   <i>grid container</i> is updated.
 
   <pre class=example>
 &lt;style type="text/css">
@@ -679,78 +676,53 @@ <h3 id=grid-layering-of-elements><span class=secno>1.4. </span> Grid
 	&lt;div id="thumb">Thumb&lt;/div>
 &lt;/div></pre>
 
-  <h2 id=grid-layout-box-model-and-terminology><span class=secno>2.
-   </span>Grid Layout Box Model and Terminology</h2>
-
-  <p> A <dfn id=grid-container>grid container</dfn> is declared in markup by
-   setting the display property of an element to ‘<a href="#grid"><code
-   class=css>grid</code></a>’ or ‘<a href="#inline-grid"><code
-   class=css>inline-grid</code></a>’. Children of a <a
-   href="#grid-container"><i>grid container</i></a> are termed <a
-   href="#grid-item"><i>grid items</i></a> and can be positioned and sized in
-   the grid by leveraging the following logical concepts.
-
-  <ul>
-   <li><a href="#grid-track"><i>grid tracks</i></a>
-
-   <li><a href="#grid-line"><i>grid lines</i></a>
-
-   <li><a href="#grid-area-concept"><i>grid areas</i></a>
-  </ul>
-
-  <p> Figure 7 illustrates the relationship between these concepts and the
-   markup in the subsections that follow produce the result shown in the
-   figure.
-
-  <div class=figure> <img
-   alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Areas and Items."
-   class=figure src="images/grid-concepts.png">
-   <p class=caption>A diagram illustrating the relationship between the <a
-    href="#grid-container"><i>grid container</i></a> and its tracks, lines,
-    areas and items.
-  </div>
-
-  <h3 id=grid-rows-and-columns><span class=secno>2.1. </span> Grid Rows and
-   Columns</h3>
+  <h2 id=grid-concepts><span class=secno>2. </span> Core Concepts of the Grid</h2>
+
+  <p> <i>Grid containers</i> use <a href="#grid-line"><i>grid lines</i></a>
+   to divide their space into <a href="#grid-track"><i>grid tracks</i></a>.
+   There are two sets of <a href="#grid-line"><i>grid lines</i></a>: one set
+   defining columns that run along the block axis, and an orthogonal set
+   defining rows along the inline axis. The contents of a <i>grid
+   container</i> are positioned, <i>item</i> by <i>item</i>, each into a <a
+   href="#grid-area-concept"><i>grid area</i></a> bound by a set of four <a
+   href="#grid-line"><i>grid lines</i></a>. They are sized and aligned to fit
+   into the intersection of the corresponding <a href="#grid-track"><i>grid
+   tracks</i></a>. <!--
+	<div class="figure">
+		<img class="figure" alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Areas and Items." src="images/grid-concepts.png" />
+		<p class="caption">A diagram illustrating the relationship between the <i>grid container</i> and its tracks, lines, areas and items.
+	</div>
+-->
 
-  <div class=sidefigure> <img alt="Image: Grid Lines." class=figure
+  <div class=figure> <img alt="Image: Grid Lines." class=figure
    src="images/grid-lines.png">
-   <p class=caption>Grid Lines.
+   <p class=caption>Grid lines: 3 in the block axis and four in the inline
+    axis.
   </div>
 
-  <p> <i>Grid elements</i> use <a href="#grid-line"><i>Grid lines</i></a> to
-   divide their space. There are two sets of <a href="#grid-line"><i>Grid
-   lines</i></a>: one set defined by the columns that run in the direction of
-   block progression, and another orthogonal set defined by rows. Block
-   progression is a writing-mode term that defines a logical direction. In
-   English it means vertical.
-
-  <p> A <a href="#grid-track"><i>Grid track</i></a> is a generic term for a
-   column or row which separates two <a href="#grid-line"><i>Grid
-   lines</i></a>. Each <a href="#grid-track"><i>Grid track</i></a> is
-   assigned a sizing function, which controls how wide or tall the column or
-   row may grow, and thus how far apart two <a href="#grid-line"><i>Grid
-   lines</i></a> are. The sizing function specified can be a length, a
-   percentage of the <i>Grid element</i>’s size, derived from the contents
-   occupying the column or row, or a proportion of the space which remains in
-   the <i>Grid element</i>. In the last case, remaining space refers to the
-   width or height of the <i>Grid element</i> after accounting for space
-   already consumed by columns and rows sized with a length, percentage or
-   content. The size can also be specified as a range using a minmax
-   function, which can combine any of the previously mentioned mechanisms to
-   define a min and max size for the column or row.
+  <p> <a href="#grid-track"><i>Grid track</i></a> is a generic term for grid
+   columns or rows, i.e. the space between two adjacent <a
+   href="#grid-line"><i>grid lines</i></a>. Each <a
+   href="#grid-track"><i>grid track</i></a> is assigned a sizing function,
+   which controls how wide or tall the column or row may grow, and thus how
+   far apart two <a href="#grid-line"><i>grid lines</i></a> are. The sizing
+   function specified can be a length, a percentage of the <i>grid
+   container</i>’s size, a measurement of the contents occupying the column
+   or row, or a proportion of the unassigned space in the grid. The size can
+   also be specified as a range using the ‘<code
+   class=css>minmax()</code>’ notation, which can combine any of the
+   previously mentioned mechanisms to define a min and max size for the
+   column or row.
 
   <div class=example>
    <p> In the following example there are two columns and three rows. The
-    first column is 150px wide beginning from the starting edge of the
-    <i>Grid element</i>’s content box. The second column uses fractional
-    sizing, which is a function of the remaining space in the Grid. Its size
-    will vary as the width of the <i>Grid element</i> changes. If the used
-    width of the <i>Grid element</i> is 200px, then the second column 50px
-    wide. If the used width of the <i>Grid element</i> is 100px, then the
-    second column is 0px and any content positioned in the column will be
-    overflowing the <i>Grid element</i>. Sizing occurs in a similar fashion
-    for the rows.
+    first column is fixed at 150px. The second column uses fractional sizing,
+    which is a function of the unassigned space in the Grid, and thus will
+    vary as the width of the <i>grid container</i> changes. If the used width
+    of the <i>grid container</i> is 200px, then the second column 50px wide.
+    If the used width of the <i>grid element</i> is 100px, then the second
+    column is 0px and any content positioned in the column will overflow the
+    <i>grid container</i>.
 
    <pre>
 &lt;style type="text/css">
@@ -762,30 +734,25 @@ <h3 id=grid-rows-and-columns><span class=secno>2.1. </span> Grid Rows and
 &lt;/style></pre>
   </div>
 
-  <h3 id=grid-lines><span class=secno>2.2. </span>Grid Lines</h3>
+  <h3 id=grid-lines><span class=secno>2.1. </span>Grid Lines</h3>
 
   <p> <dfn id=grid-line title="grid line">Grid lines</dfn> are the horizontal
-   or vertical dividing lines that exist on either side of a column or row.
-   <a href="#grid-line"><i>Grid lines</i></a> may be referred to by their <a
-   href="#grid-line"><i>grid line</i></a> number, or they may be named by the
-   author. Authors use one or more quoted strings to assign names to a <a
-   href="#grid-line"><i>Grid line</i></a> before or after a <a
-   href="#grid-track"><i>Grid track</i></a> definition wherever the desired
-   <a href="#grid-line"><i>Grid line</i></a> would logically exist. A <a
-   href="#grid-item"><i>Grid item</i></a> then uses the <a
-   href="#grid-line"><i>Grid lines</i></a> to determine its position within
-   the Grid by referencing the <a href="#grid-line"><i>Grid lines</i></a>
-   using the properties ‘<code class=property>grid-row-position</code>’
-   and ‘<code class=property>grid-column-position</code>’.
-
-  <p> The following two examples create three column <a
-   href="#grid-line"><i>Grid lines</i></a> and four row <a
-   href="#grid-line"><i>Grid lines</i></a>. The first example demonstrates
-   how an author would position a <a href="#grid-item"><i>Grid item</i></a>
-   using <a href="#grid-line"><i>Grid line</i></a> numbers. The second
-   example uses explicitly named <a href="#grid-line"><i>Grid lines</i></a>.
+   or vertical dividing lines of the grid. They may be referred to by their
+   <a href="#grid-line"><i>grid line</i></a> number, or they may be named by
+   the author. A <a href="#grid-item"><i>grid item</i></a> references these
+   <a href="#grid-line"><i>grid lines</i></a> to determine its position
+   within the grid using the <a href="#placement">grid-placement
+   properties</a>.
 
-  <pre class=example>
+  <div class=example>
+   <p> The following two examples create three column <a
+    href="#grid-line"><i>grid lines</i></a> and four row <a
+    href="#grid-line"><i>grid lines</i></a>. The first example demonstrates
+    how an author would position a <a href="#grid-item"><i>grid item</i></a>
+    using <a href="#grid-line"><i>grid line</i></a> numbers. The second
+    example uses explicitly named <a href="#grid-line"><i>grid lines</i></a>.
+
+   <pre>
 &lt;style type="text/css">
 	#grid {
 		display: grid;
@@ -796,7 +763,7 @@ <h3 id=grid-lines><span class=secno>2.2. </span>Grid Lines</h3>
 	#item1 { grid-column-position: 2; grid-row-position: 1; grid-row-span: 3 }
 &lt;/style></pre>
 
-  <pre class=example>
+   <pre>
 &lt;style type="text/css">
 	/* equivalent layout to the prior example, but using named lines */
 	#grid {
@@ -810,8 +777,9 @@ <h3 id=grid-lines><span class=secno>2.2. </span>Grid Lines</h3>
 		grid-row: "item1-start" "item1-end"
 	}
 &lt;/style></pre>
+  </div>
 
-  <h3 id=grid-concepts-tracks><span class=secno>2.3. </span> Grid Tracks</h3>
+  <h3 id=grid-concepts-tracks><span class=secno>2.2. </span> Grid Tracks</h3>
 
   <p> <dfn id=grid-track>Grid Track</dfn>s are the columns and rows of the
    Grid defined with the ‘<a href="#grid-definition-rows"><code
@@ -831,7 +799,7 @@ <h3 id=grid-concepts-tracks><span class=secno>2.3. </span> Grid Tracks</h3>
 	}
 &lt;/style></pre>
 
-  <h3 id=grid-areas><span class=secno>2.4. </span>Grid Areas</h3>
+  <h3 id=grid-areas><span class=secno>2.3. </span>Grid Areas</h3>
 
   <p> <dfn id=grid-area-concept>Grid Area</dfn>s are the logical space used
    to lay out one or more <a href="#grid-item"><i>Grid items</i></a>. <a
@@ -896,13 +864,13 @@ <h2 id=grid-containers><span class=secno>3. </span> Grid Containers: the
   <dl>
    <dt><dfn id=grid>grid</dfn>
 
-   <dd> This value causes an element to generate a block-level <a
-    href="#grid-container"><i>grid container</i></a> box.
+   <dd> This value causes an element to generate a block-level <i>grid
+    container</i> box.
 
    <dt><dfn id=inline-grid>inline-grid</dfn>
 
-   <dd> This value causes an element to generate an inline-level <a
-    href="#grid-container"><i>grid container</i></a> box.
+   <dd> This value causes an element to generate an inline-level <i>grid
+    container</i> box.
   </dl>
 
   <p> The baseline of an inline <i>Grid element</i> is the bottom edge of the
@@ -1123,7 +1091,7 @@ <h3 id=track-sizing><span class=secno>5.1. </span> Track Sizing: the ‘<a
     <tr>
      <td>Applies to:
 
-     <td><a href="#grid-container"><i>grid containers</i></a>
+     <td><i>grid containers</i>
 
     <tr>
      <td>Inherited:
@@ -1435,7 +1403,7 @@ <h3 id=grid-template-property><span class=secno>5.2. </span> Named Areas:
     <tr>
      <td>Applies to:
 
-     <td><a href="#grid-container"><i>grid containers</i></a>
+     <td><i>grid containers</i>
 
     <tr>
      <td>Inherited:
@@ -1545,7 +1513,7 @@ <h3 id=auto-tracks><span class=secno>5.3. </span> Auto-generated Rows and
     <tr>
      <td>Applies to:
 
-     <td><a href="#grid-container"><i>grid containers</i></a>
+     <td><i>grid containers</i>
 
     <tr>
      <td>Inherited:
@@ -1626,7 +1594,7 @@ <h3 id=auto-tracks><span class=secno>5.3. </span> Auto-generated Rows and
 	&lt;div id="C">C&lt;/div>
 &lt;/div></pre>
 
-  <h2 id=placing-grid-items><span class=secno>6. </span>Placing Grid Items</h2>
+  <h2 id=placement><span class=secno>6. </span> Placing Grid Items</h2>
 
   <p class=issue> Put in "common uses" section, like ‘<code
    class=property>flex</code>’ has, to describe what you would use ‘<a
@@ -1710,8 +1678,7 @@ <h3 id=line-placement><span class=secno>6.1. </span> Line-based Placement:
    <dt><dfn id=grid-placement-int title=""><var>&lt;integer></var></dfn>
 
    <dd> Specifies the <var>N</var>th line from the corresponding edge of the
-    <a href="#grid-container"><i>grid container</i></a>. Negative integers or
-    zero are invalid.
+    <i>grid container</i>. Negative integers or zero are invalid.
     <p class=issue> Should we let negative integers specify lines from the
      opposite edge?
 
@@ -1729,10 +1696,9 @@ <h3 id=line-placement><span class=secno>6.1. </span> Line-based Placement:
     <var>&lt;integer></var>?</dfn>
 
    <dd> Specifies the <var>N</var>th line with the given name from the
-    corresponding edge of the <a href="#grid-container"><i>grid
-    container</i></a>. If the <var>&lt;integer></var> is omitted, it defaults
-    to ‘<code class=css>1</code>’. Negative integers or zero are invalid.
-
+    corresponding edge of the <i>grid container</i>. If the
+    <var>&lt;integer></var> is omitted, it defaults to ‘<code
+    class=css>1</code>’. Negative integers or zero are invalid.
     <p class=issue> Should we let negative integers specify lines from the
      opposite edge?
 
@@ -1989,7 +1955,7 @@ <h3 id=grid-auto-flow-property><span class=secno>6.3. </span> Automatic
     <tr>
      <td>Applies to:
 
-     <td><a href="#grid-container"><i>grid containers</i></a>
+     <td><i>grid containers</i>
 
     <tr>
      <td>Inherited:
@@ -3393,7 +3359,7 @@ <h2 class=no-num id=index> Index</h2>
     title="section 6.1."><strong>6.1.</strong></a>
 
    <li>Grid Area, <a href="#grid-area-concept"
-    title="section 2.4."><strong>2.4.</strong></a>
+    title="section 2.3."><strong>2.3.</strong></a>
 
    <li>grid-area, <a href="#grid-area"
     title="section 6.2."><strong>6.2.</strong></a>
@@ -3413,9 +3379,6 @@ <h2 class=no-num id=index> Index</h2>
    <li>grid-column, <a href="#grid-column"
     title="section 6.2."><strong>6.2.</strong></a>
 
-   <li>grid container, <a href="#grid-container"
-    title="section 2."><strong>2.</strong></a>
-
    <li>grid-definition-columns, <a href="#grid-definition-columns"
     title="section 5.1."><strong>5.1.</strong></a>
 
@@ -3432,7 +3395,7 @@ <h2 class=no-num id=index> Index</h2>
     title="section 6.1."><strong>6.1.</strong></a>
 
    <li>grid line, <a href="#grid-line"
-    title="section 2.2."><strong>2.2.</strong></a>
+    title="section 2.1."><strong>2.1.</strong></a>
 
    <li>grid-row, <a href="#grid-row"
     title="section 6.2."><strong>6.2.</strong></a>
@@ -3444,7 +3407,7 @@ <h2 class=no-num id=index> Index</h2>
     title="section 5.2."><strong>5.2.</strong></a>
 
    <li>Grid Track, <a href="#grid-track"
-    title="section 2.3."><strong>2.3.</strong></a>
+    title="section 2.2."><strong>2.2.</strong></a>
 
    <li>inline-grid, <a href="#inline-grid"
     title="section 3."><strong>3.</strong></a>