[css-grid] s/areas/components/ to avoid confusion with grid areas; reformat example code per kaelig's suggestion

Author: fantasai

css-grid/Overview.bs

@@ -135,7 +135,7 @@ Adapting Layouts to Available Space</h3>
 	</figure>
 
 	Grid layout can be used to intelligently reflow elements within a webpage.
-	Figure 2 represents a game with five major areas in the layout:
+	Figure 2 represents a game with five major components in the layout:
 	the game title, stats area, game board, score area, and control area.
 	The author's intent is to divide the space for the game such that:
 
@@ -169,18 +169,28 @@ Adapting Layouts to Available Space</h3>
 	<div class="example">
 		<pre class="lang-css">
 		#grid {
+			/**
+			 * Two columns:
+			 *  1. the first sized to content,
+			 *  2. the second receives the remaining space
+			 *     (but is never smaller than the minimum size of the board
+			 *     or the game controls, which occupy this column [3])
+			 *
+			 * Three rows:
+			 *  3. the first sized to content,
+			 *  4. the middle row receives the remaining space
+			 *     (but is never smaller than the minimum height
+			 *      of the board or stats areas)
+			 *  5. the last sized to content.
+			 */
 			display: grid;
-
-			/* Two columns: the first sized to content, the second receives
-			 * the remaining space, but is never smaller than the minimum
-			 * size of the board or the game controls, which occupy this
-			 * column. */
-			grid-template-columns: auto 1fr;
-
-			/* Three rows: the first and last sized to content, the middle
-			 * row receives the remaining space, but is never smaller than
-			 * the minimum height of the board or stats areas. */
-			grid-template-rows: auto 1fr auto;
+			grid-template-columns:
+				/* 1 */ auto
+				/* 2 */ 1fr;
+			grid-template-rows:
+				/* 3 */ auto
+				/* 4 */ 1fr
+				/* 5 */ auto;
 		}
 
 		/* Each part of the game is positioned between grid lines by