[css-grid] Add example of justify/align-content on a grid container.

Author: tabatkins

css-grid/Overview.html

@@ -2293,8 +2293,8 @@ <h3 class="heading settled heading" data-level=8.4 id=abspos-items><span class=s
 			<img height=402 src=images/abspos-grid.svg width=702>
 		</figure>
 
-<p class=note>		Note: Note that grids and the <a data-link-type=dfn href=#grid-placement-property title="grid-placement properties">grid-placement properties</a> are <a data-link-type=dfn title=flow-relative>flow-relative</a>,
-		while abspos offsets are <a data-link-type=dfn title=physical>physical</a>,
+<p class=note>		Note: Note that grids and the <a data-link-type=dfn href=#grid-placement-property title="grid-placement properties">grid-placement properties</a> are <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#flow-relative title=flow-relative>flow-relative</a>,
+		while abspos offsets are <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#physical title=physical>physical</a>,
 		so if the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction title=direction>direction</a> or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode title=writing-mode>writing-mode</a> properties change,
 		the grid will transform to match,
 		but the offsets won’t.
@@ -2393,8 +2393,21 @@ <h3 class="heading settled heading" data-level=9.4 id=grid-align><span class=sec
 	(for example, if no columns are flex-sized),
 	the <a data-link-type=dfn href=#grid title=grid>grid</a> is aligned within the padding box according to the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-content title=justify-content>justify-content</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-content title=align-content>align-content</a> properties on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
 
-	<p class=issue id=issue-ca7aec73><a class=self-link href=#issue-ca7aec73></a>
-		Provide a picture as example.
+	<div class=example>
+		For example, the following grid is centered vertically,
+		and aligned to the right edge of its <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>:
+
+		<pre>  .grid {
+    display: grid;
+    grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
+    justify-content: end;
+    align-content: center;
+  }
+</pre>
+		<figure>
+			<img height=252 src=images/align-justify-content.svg width=352>
+		</figure>
+	</div>
 
 <h3 class="heading settled heading" data-level=9.5 id=z-order><span class=secno>9.5 </span><span class=content>
 Z-axis Ordering: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> property</span><a class=self-link href=#z-order></a></h3>
@@ -3320,9 +3333,6 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 		instead of always using 1,1 by default.
 
 <a href=#issue-4e6cc4f1> ↵ </a></div><div class=issue>
-		Provide a picture as example.
-
-<a href=#issue-ca7aec73> ↵ </a></div><div class=issue>
 			Currently this algorithm embodies several heuristics which regulate the growth of spanning <a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> to accommodate certain use cases. (E.g. the game example in Figures 2 and 3 above.) These heuristics should be a normative part of this specification to ensure interoperability. To the extent additional use cases can be identified that cannot be satisfied by following the current heuristics, the normative algorithm can be updated, or additional mechanisms can be introduced for fine-grained control of content-based TrackSizingFunction.
 
 		<a href=#issue-7a82b645> ↵ </a></div><div class=issue>

css-grid/Overview.src.html

@@ -2448,8 +2448,23 @@ <h3 id='grid-align'>
 	(for example, if no columns are flex-sized),
 	the <a>grid</a> is aligned within the padding box according to the 'justify-content' and 'align-content' properties on the <a>grid container</a>.
 
-	<p class='issue'>
-		Provide a picture as example.
+	<div class='example'>
+		For example, the following grid is centered vertically,
+		and aligned to the right edge of its <a>grid container</a>:
+
+		<pre>
+			.grid {
+				display: grid;
+				grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
+				justify-content: end;
+				align-content: center;
+			}
+		</pre>
+
+		<figure>
+			<img src="images/align-justify-content.svg" width="352" height="252">
+		</figure>
+	</div>
 
 <h3 id='z-order'>
 Z-axis Ordering: the 'z-index' property</h3>