[css-grid] Remove layering example that confuses people, and could alternatively be handled with flex layout anyway.

Author: fantasai

css-grid/Overview.bs

@@ -327,11 +327,8 @@ Background and Motivation</h3>
 	using a set of predictable sizing behaviors.
 	Authors can then precisely position and size the building block elements of their application
 	into the <a>grid areas</a> defined by the intersections of these columns and rows.
-
-<h3 id="overview-examples">
-Sample Use Cases</h3>
-
-	<em>This section is not normative.</em>
+	The following examples illustrate the adaptive capabilities of grid layout,
+	and how it allows a cleaner separation of content and style.
 
 <h4 id='adapting-to-available-space'>
 Adapting Layouts to Available Space</h4>
@@ -529,91 +526,6 @@ Source-Order Independence</h4>
 	as a substitute for correct source ordering,
 	as that can ruin the accessibility of the document.
 
-<h4 id='grid-layering'>
-Grid Layering of Elements</h4>
-
-	<figure class="sidefigure">
-		<img alt="Image: A control composed of layered HTML elements." src="images/control-layering-and-alignment.png" />
-
-		<figcaption>A control composed of layered HTML elements.</figcaption>
-	</figure>
-
-	In the example shown in Figure 6,
-	the author is creating a custom slider control.
-	<ul>
-		<li>
-			The control has six parts.
-		<li>
-			The lower-limit and upper-limit labels align to the left and right edges of the control.
-		<li>
-			The track of the slider spans the area between the labels.
-		<li>
-			The lower-fill and upper-fill parts touch beneath the thumb.
-		<li>
-			The thumb is a fixed width and height that can be moved along the track
-			by updating the two flex-sized columns.
-		<li>
-			The thumb,
-			snaps to various positions along the track
-			as the 'grid-template-columns' property of the <a>grid container</a> is updated.
-	</ul>
-
-
-
-	<div class="example">
-		<pre class="lang-css">
-		#grid {
-			display: grid;
-
-			/* The grid-template-columns and rows properties also support
-			* naming grid lines which can then be used to position grid
-			* items.  The line names are assigned on either side of a column
-			* or row sizing function where the line would logically exist. */
-			grid-template-columns:
-				[start]        auto
-				[track-start]  0.5fr
-				[thumb-start]  auto
-				[fill-split]   auto
-				[thumb-end]    0.5fr
-				[track-end]    auto
-				[end];
-		}
-
-		/* The grid-placement properties accept named lines. Below the
-		* lines are referred to by name. Beyond any
-		* semantic advantage, the names also allow the author to avoid
-		* renumbering the grid-column-start and grid-row-start properties of the
-		* grid items.  This is similar to the concept demonstrated in the
-		* prior example with the grid-template-areas property during orientation
-		* changes, but grid lines can also work with layered grid items
-		* that have overlapping areas of different shapes like the thumb
-		* and track parts in this example. */
-		#low-label  { grid-column-start: start; }
-		#track      { grid-column: track-start / track-end; justify-self: center; }
-		#high-label { grid-column-end: end; }
-
-		/* Fill parts are drawn above the track so set z-index to 5. */
-		#low-fill  { grid-column: track-start / fill-split;
-		             justify-self: end;
-		             z-index: 5; }
-		#high-fill  { grid-column: fill-split / track-end;
-		              justify-self: start;
-		              z-index: 5; }
-
-		/* Thumb is the topmost part; assign it the highest z-index value. */
-		#thumb       { grid-column: thumb-start / thumb-end; z-index: 10 }
-		</pre>
-		<pre class="lang-markup">
-		&lt;div id="grid">
-			&lt;div id="low-label">0&lt;/div>
-			&lt;div id="high-label">50&lt;/div>
-			&lt;div id="track">&lt;/div>
-			&lt;div id="low-fill">&lt;/div>
-			&lt;div id="high-fill">&lt;/div>
-			&lt;div id="thumb">&lt;/div>
-		&lt;/div>
-		</pre>
-	</div>
 
 <!--
  ██████   ███████  ██    ██  ██████  ████████ ████████  ████████  ██████