[css-grid] Specify how justify-content/align-content work.

Author: tabatkins

css-grid/Overview.html

@@ -137,8 +137,9 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 Alignment</a><ul class=toc><li><a href=#auto-margins><span class=secno>9.1</span>
 Aligning with <span data-link-for=margin data-link-type=value title=auto>auto</span> margins</a><li><a href=#row-align><span class=secno>9.2</span>
 Row-axis Alignment: the <span class=property data-link-type=propdesc title=justify-self>justify-self</span> and <span class=property data-link-type=propdesc title=justify-items>justify-items</span> properties</a><li><a href=#column-align><span class=secno>9.3</span>
-Column-axis Alignment: the <span class=property data-link-type=propdesc title=align-self>align-self</span> and <span class=property data-link-type=propdesc title=align-items>align-items</span> properties</a><li><a href=#z-order><span class=secno>9.4</span>
-Z-axis Ordering: the <span class=property data-link-type=propdesc title=z-index>z-index</span> property</a><li><a href=#grid-baselines><span class=secno>9.5</span>
+Column-axis Alignment: the <span class=property data-link-type=propdesc title=align-self>align-self</span> and <span class=property data-link-type=propdesc title=align-items>align-items</span> properties</a><li><a href=#grid-align><span class=secno>9.4</span>
+Aligning the Grid: the <span class=property data-link-type=propdesc title=justify-content>justify-content</span> and <span class=property data-link-type=propdesc title=align-content>align-content</span> properties</a><li><a href=#z-order><span class=secno>9.5</span>
+Z-axis Ordering: the <span class=property data-link-type=propdesc title=z-index>z-index</span> property</a><li><a href=#grid-baselines><span class=secno>9.6</span>
 Grid Baselines</a></ul><li><a href=#layout-algorithm><span class=secno>10</span>
 Grid Layout Algorithm</a><ul class=toc><li><a href=#algo-terms><span class=secno>10.1</span>
 Definition of Terms for use in Calculating Grid Track Sizes</a><li><a href=#track-sizing-algorithm><span class=secno>10.2</span>
@@ -2190,7 +2191,7 @@ <h3 class="heading settled heading" data-level=8.4 id=abspos-items><span class=s
 	do not take up space or otherwise participate in the layout of the grid.
 
 	<div class=example>
-		<pre class=example>  .grid {
+		<pre>  .grid {
     display: grid;
     grid: ...;
     position: relative; /* containing block */
@@ -2206,7 +2207,7 @@ <h3 class="heading settled heading" data-level=8.4 id=abspos-items><span class=s
   }
 </pre>	</div>
 
-	<p class=issue id=issue-382f79cc><a class=self-link href=#issue-382f79cc></a>
+	<div class=issue id=issue-40e1e2b2><a class=self-link href=#issue-40e1e2b2></a>
 		<ul>
 			<li>Simple example of abspos spanning the whole grid.
 			<li>Example of abspos spanning a portion of the grid.
@@ -2220,6 +2221,7 @@ <h3 class="heading settled heading" data-level=8.4 id=abspos-items><span class=s
     grid-column: auto / span 2;
   }
 </pre>		</ul>
+	</div>
 
 <h2 class="heading settled heading" data-level=9 id=alignment><span class=secno>9 </span><span class=content>
 Alignment</span><a class=self-link href=#alignment></a></h2>
@@ -2307,7 +2309,17 @@ <h3 class="heading settled heading" data-level=9.3 id=column-align><span class=s
 		or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-items title=align-items>align-items</a> property on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
 		as defined in <a data-biblio-type=normative data-link-type=biblio href=#css3-align title=css3-align>[CSS3-ALIGN]</a>.
 
-<h3 class="heading settled heading" data-level=9.4 id=z-order><span class=secno>9.4 </span><span class=content>
+<h3 class="heading settled heading" data-level=9.4 id=grid-align><span class=secno>9.4 </span><span class=content>
+Aligning the Grid: 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</span><a class=self-link href=#grid-align></a></h3>
+
+<p>	If the <a data-link-type=dfn href=#grid title=grid>grid</a>’s outer edges do not correspond to the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>’s padding edges
+	(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-3ca79b56><a class=self-link href=#issue-3ca79b56></a>
+		Provide a picture as example.
+
+<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>
 
 
@@ -2362,7 +2374,7 @@ <h3 class="heading settled heading" data-level=9.4 id=z-order><span class=secno>
   &lt;div id="E"&gt;E&lt;/div&gt;
 &lt;/div&gt;</pre>	</div>
 
-<h3 class="heading settled heading" data-level=9.5 id=grid-baselines><span class=secno>9.5 </span><span class=content>
+<h3 class="heading settled heading" data-level=9.6 id=grid-baselines><span class=secno>9.6 </span><span class=content>
 Grid Baselines</span><a class=self-link href=#grid-baselines></a></h3>
 
 	<p>
@@ -3154,8 +3166,8 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>value for grid-template, <a href=#valuedef-none2 title="section 5.3">5.3</a>
 <li>value for grid-auto-flow, <a href=#valuedef-none title="section 6.2">6.2</a>
 </ul><li>occupied grid cell, <a href=#occupied-grid-cell title="section 6.2.1">6.2.1</a>
-<li>order-modified grid order, <a href=#order-modified-grid-order title="section 9.5">9.5</a>
-<li>participates in baseline alignment, <a href=#baseline-participation title="section 9.5">9.5</a>
+<li>order-modified grid order, <a href=#order-modified-grid-order title="section 9.6">9.6</a>
+<li>participates in baseline alignment, <a href=#baseline-participation title="section 9.6">9.6</a>
 <li>&lt;percentage&gt;, <a href=#valuedef-percentage title="section 5.1">5.1</a>
 <li>placement, <a href=#grid-placementplacement title="section 8">8</a>
 <li>RemainingSpace, <a href=#RemainingSpace-definition title="section 10.1">10.1</a>
@@ -3223,8 +3235,26 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 		Should <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a> be <a class=property data-link-type=propdesc title=grid-field>grid-field</a>?
 
 
-<a href=#issue-6466e536> ↵ </a><p class=issue>
-		<a href=#issue-382f79cc> ↵ </a><p class=issue>
+<a href=#issue-6466e536> ↵ </a><div class=issue>
+		<ul>
+			<li>Simple example of abspos spanning the whole grid.
+			<li>Example of abspos spanning a portion of the grid.
+			<li>Example of abspos using its offsets.
+			<li>Complex example of a centered grid interacting with abspos doing both padding-edge and explicit lines.
+				<pre>  .grid {
+    justify-content: center;
+  }
+  .abspos {
+    grid-row: 2 / -1;
+    grid-column: auto / span 2;
+  }
+</pre>		</ul>
+	<a href=#issue-40e1e2b2> ↵ </a></div>
+
+<p class=issue>
+		Provide a picture as example.
+
+<a href=#issue-3ca79b56> ↵ </a><p 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-a01f80c8> ↵ </a><p class=issue>

css-grid/Overview.src.html

@@ -2285,7 +2285,7 @@ <h3 id="abspos-items">
 	do not take up space or otherwise participate in the layout of the grid.
 
 	<div class='example'>
-		<pre class='example'>
+		<pre>
 			.grid {
 				display: grid;
 				grid: ...;
@@ -2303,7 +2303,7 @@ <h3 id="abspos-items">
 		</pre>
 	</div>
 
-	<p class='issue'>
+	<div class='issue'>
 		<ul>
 			<li>Simple example of abspos spanning the whole grid.
 			<li>Example of abspos spanning a portion of the grid.
@@ -2319,6 +2319,7 @@ <h3 id="abspos-items">
 					}
 				</pre>
 		</ul>
+	</div>
 
 <h2 id='alignment'>
 Alignment</h2>
@@ -2408,6 +2409,16 @@ <h3 id='column-align'>
 		or 'align-items' property on the <a>grid container</a>,
 		as defined in [[!CSS3-ALIGN]].
 
+<h3 id='grid-align'>
+Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
+
+	If the <a>grid</a>’s outer edges do not correspond to the <a>grid container</a>’s padding edges
+	(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.
+
 <h3 id='z-order'>
 Z-axis Ordering: the 'z-index' property</h3>