[css-grid] Add Rachel Andrew's example of spanning+distribution.

Author: fantasai

css-grid/Overview.bs

@@ -3390,7 +3390,45 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
 	If the <a>grid</a> is <a>fragmented</a> between tracks,
 	any such additional spacing between those tracks must be suppressed.
 
-	Issue: Add example of fixed size spanner getting extra space from content-distribution.
+	<div class="example">
+		For example, in the following grid,
+		the spanning item’s grid area is increased to accommodate
+		the extra space assigned to the gutters due to alignment:
+
+		<pre>
+			.wrapper {
+			  display: grid;
+			  &hellip; 4-column / 3-row grid container &hellip;
+			  grid-gap: 10px;
+			  align-content: space-around;
+			  justify-content: space-between;
+			}
+
+			.item1 { grid-column: 1 / 5; }
+			.item2 { grid-column: 1 / 3; grid-row: 2 / 4; }
+			.item3 { grid-column: 3 / 5; }
+			/* last two items auto-place into the last two grid cells */
+		</pre>
+
+		<figure>
+			<img src="images/spanned-gap.png"
+			     alt="Grid with 10px gap and an element spanning all columns.
+			          The sum of the columns is less than the width of the grid container.">
+			<figcaption>Grid before alignment</figure>
+		</figure>
+        <figure>
+			<img src="images/spanned-gap-align.png"
+			     alt="Same grid with increased gaps absorbing the excess grid containe width.
+			          The spanning element has grown to accommodate the extra space assigned to the gap it crosses.">
+			<figcaption>Grid after alignment</figure>
+		</figure>
+
+		Note that alignment (unlike 'grid-gap' spacing)
+		happens after the grid tracks are sized,
+		so if the track sizes are determined by the contents of the spanned item,
+		it will gain excess space in the alignment stage
+		to accommodate the alignment spacing.
+	</div>
 
 <h3 id='grid-baselines'>
 Grid Container Baselines</h3>