[css-grid] Rewrite intro

Author: fantasai

css-grid/Overview.bs

@@ -78,28 +78,63 @@ please report them to the CSSWG,
 as this is likely an error.
 
 <h2 id='intro'>
-Introduction and Overview</h2>
-
-	Grid layout contains features targeted at web application authors.
-	The grid can be used to achieve many different layouts.
-	It excels at dividing up space for major regions of an application,
-	as well as defining the relative size, position, and painting order
-	for the parts of a control built from HTML primitives.
-
-	Like tables,
-	grid layout enables an author to align elements into columns and rows,
-	but unlike tables,
-	grid layout doesn't have content structure,
-	and thus enables a wide variety of layouts not possible with tables.
-	For example, the children of a grid container can position themselves
-	such that they overlap similar to positioned elements.
-
-	In addition, the absence of content structure in grid layout helps to manage changes to layout
-	by using fluid and source order independent layout techniques.
-	By combining media queries with the CSS properties that control layout of the grid container and its children,
+Introduction</h2>
+
+	<em>This section is not normative.</em>
+
+	Like <a href="http://www.w3.org/TR/css-flexbox-1/">Flexible Box Layout</a>,
+	Grid Layout is a new layout model for CSS
+	that has powerful abilities to control the sizing and positioning of boxes and their contents.
+	Unlike Flexbox, however, which is single-axis&ndash;oriented,
+	Grid Layout is optimized for 2-dimensional layouts:
+	those in which alignment of content is desired in both dimensions.
+	In addition, and unlike tables,
+	the absence of content structure in grid layout helps to manage changes to layout
+	by allowing fluid and source order independent layout techniques.
+	By combining <a href="http://www.w3.org/TR/css3-mediaqueries/">media queries</a> with the CSS properties that control layout of the grid container and its children,
 	authors can adapt their layout to changes in device form factors, orientation, and available space,
 	without needing to alter the semantic nature of their content.
 
+<h2 id='overview'>
+Overview</h2>
+
+	Grid Layout controls the layout of its content
+	through the use of a <a>grid</a>:
+	an intersecting set of horizontal and vertical lines
+	which create a sizing and positioning coordinate system
+	for the <a>grid container</a>’s contents.
+	The contents of the <a>grid container</a> are organized into <a>grid items</a>
+	(analogous to <a>flex items</a>),
+	which are then assigned to slots (<a>grid areas</a>) in the <a>grid</a>--
+	either explicitly through the <a>grid placement properties</a>
+	or implicitly through <a href="#auto-placement">auto-placement</a>.
+	If the <a>explicit grid</a>
+	(defined by the 'grid-template-*' properties)
+	can’t fit all of the <a>grid items</a>,
+	<a>implicit grid tracks</a> are added
+	(as defined by the 'grid-auto-*' properties).
+	A 'grid' shorthand on the <a>grid container</a>
+	provides for setting all of these grid definition parameters at once,
+	while the <a>grid placement properties</a> on the <a>grid items</a>
+	determine their placement within the grid.
+
+	Once the <a>grid items</a> have been <a href="#placement">placed</a>,
+	the sizes of the <a>grid tracks</a> (rows and columns) are calculated,
+	accounting for the sizes of their contents and/or available space as specified in the grid definition.
+	The sized grid is then aligned within its <a>grid container</a>
+	according to the <a>grid container</a>’s 'align-content' and 'justify-content' properties.
+	Finally each <a>grid item</a> is sized and aligned within its assigned <a>grid area</a>,
+	as specified by its own sizing and alignment properties.
+
+	Grid Layout features
+	fixed, flexible, and content-based <a href="#track-sizing">track sizing functions</a>;
+	<a href="#placement">explicit item positioning</a> via forwards (positive) and backwards(negative) numbered grid coordinates,
+	named grid lines, and named grid areas;
+	automatic item placement into empty slots, including <a href="#order-property">reordering with <css>order</css>;
+	automatic addition of rows or columns to accommodate additional content;
+	control over alignment and spacing with
+	<a href="#auto-margins">margins</a>, <a>gutters</a>, and the <a href="http://www.w3.org/TR/css-align/">alignment properties</a>;
+	and the ability to overlap content and <a href="#z-order">control layering with <css>z-index</css></a>.
 
 <h3 id='background'>
 Background and Motivation</h3>