[css-grid] Define how grid items are sized. Rejigger the organization of the section.

Author: tabatkins

css-grid/Overview.bs

@@ -19,7 +19,7 @@ Former editor: Phil Cupp, Microsoft Corporation, pcupp@microsoft.com
 !Issues list: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Grid+Layout&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">In Bugzilla</a>
 Abstract: This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.
 Ignored Terms: containing block, <positive-integer>, <ident>, auto, grid-*-start, grid-*-end, flex factor, flex factors, block formatting context, grid-auto-position
-Link Defaults: css21 (property) margin, css-align-3 (dfn) alignment container/alignment subject
+Link Defaults: css21 (property) margin, css-align-3 (dfn) alignment container/alignment subject/box alignment properties, css-align-3 (value) stretch/baseline, css-position-3 (property) left
 At Risk: the ''grid-template-rows/subgrid'' value of 'grid-template-columns' and 'grid-template-rows', and its component parts individually
 </pre>
 
@@ -613,15 +613,6 @@ Grid Items</h2>
 	<a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a>
 	is not rendered, as if it were ''display:none''.
 
-	A <a>grid item</a> establishes a new formatting context for its contents.
-	The type of this formatting context is determined by its 'display' value, as usual.
-	The computed 'display' of a <a>grid item</a>
-	is determined by applying the table in
-	<a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a>.
-	However, grid items are grid-level boxes, not block-level boxes:
-	they participate in their container's <a>grid formatting context</a>,
-	not in a block formatting context.
-
 	<div class="example">
 			Examples of grid items:
 		<pre>
@@ -648,7 +639,7 @@ Grid Items</h2>
 
 	Some values of 'display' trigger the generation of anonymous boxes.
 	For example, a misparented ''table-cell'' child is fixed up
-	by <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating anonymous ''table'' and ''table-row'' elements</a> around it. [[!CSS21]]
+	by <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating anonymous <css>table</css> and <css>table-row</css> elements</a> around it. [[!CSS21]]
 	This fixup must occur <em>before</em> a <a>grid container</a>’s children are promoted to <a>grid items</a>.
 	For example, given two contiguous child elements with ''display:table-cell'',
 	an anonymous table wrapper box around them becomes the <a>grid item</a>.
@@ -657,6 +648,21 @@ Grid Items</h2>
 		Future display types may generate anonymous containers (e.g. ruby) or otherwise mangle the box tree (e.g. run-ins).
 		It is intended that grid item determination run after these operations.
 
+	A <a>grid item</a> establishes a new formatting context for its contents.
+	The type of this formatting context is determined by its 'display' value, as usual.
+	The computed 'display' of a <a>grid item</a>
+	is determined by applying the table in
+	<a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a>.
+	However, grid items are grid-level boxes, not block-level boxes:
+	they participate in their container's <a>grid formatting context</a>,
+	not in a block formatting context.
+
+	A <a>grid item</a> is sized within the containing block defined by its <a>grid area</a>
+	similarly to an equivalent block-level box in an equivalently-sized containing block,
+	except that ''margin/auto'' margins and the <a>box alignment properties</a>
+	have special effects. (See [[#alignment]].)
+
+
 <!--
 <h3 id="position-grid">
 Non-children Grid Items</h3>

css-grid/Overview.html

@@ -1234,7 +1234,7 @@ <h3 class="heading settled" data-level="1.3" id="source-independence"><span clas
 		<img alt="Image: An arrangement suitable for portrait orientation." src="images/game-portrait.png">
 
 
-        <figcaption>An arrangement suitable for <span class="css">portrait</span> orientation.</figcaption>
+        <figcaption>An arrangement suitable for <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-page-3/#valdef-page-size-portrait">portrait</a> orientation.</figcaption>
 
 
       </figure>
@@ -1244,7 +1244,7 @@ <h3 class="heading settled" data-level="1.3" id="source-independence"><span clas
 		<img alt="Image: An arrangement suitable for landscape orientation." src="images/game-landscape.png">
 
 
-        <figcaption>An arrangement suitable for <span class="css">landscape</span> orientation.</figcaption>
+        <figcaption>An arrangement suitable for <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-page-3/#valdef-page-size-landscape">landscape</a> orientation.</figcaption>
 
 
       </figure>
@@ -1714,16 +1714,6 @@ <h2 class="heading settled" data-level="4" id="grid-items"><span class="secno">4
 	<a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white space</a>
 	is not rendered, as if it were <span class="css">display:none</span>.</p>
 
-
-      <p>A <a data-link-type="dfn" href="#grid-item">grid item</a> establishes a new formatting context for its contents.
-	The type of this formatting context is determined by its <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> value, as usual.
-	The computed <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> of a <a data-link-type="dfn" href="#grid-item">grid item</a>
-	is determined by applying the table in
-	<a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a>.
-	However, grid items are grid-level boxes, not block-level boxes:
-	they participate in their container’s <a data-link-type="dfn" href="#grid-formatting-context">grid formatting context</a>,
-	not in a block formatting context.</p>
-
 
       <div class="example">
 			Examples of grid items:
@@ -1753,7 +1743,7 @@ <h2 class="heading settled" data-level="4" id="grid-items"><span class="secno">4
 
 
       <p>Some values of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> trigger the generation of anonymous boxes.
-	For example, a misparented <span class="css">table-cell</span> child is fixed up
+	For example, a misparented <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-display-3/#valdef-display-outside-table-cell">table-cell</a> child is fixed up
 	by <a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">generating anonymous <span class="css">table</span> and <span class="css">table-row</span> elements</a> around it. <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>
 	This fixup must occur <em>before</em> a <a data-link-type="dfn" href="#grid-container">grid container</a>’s children are promoted to <a data-link-type="dfn" href="#grid-item">grid items</a>.
 	For example, given two contiguous child elements with <span class="css">display:table-cell</span>,
@@ -1764,9 +1754,27 @@ <h2 class="heading settled" data-level="4" id="grid-items"><span class="secno">4
 		Future display types may generate anonymous containers (e.g. ruby) or otherwise mangle the box tree (e.g. run-ins).
 		It is intended that grid item determination run after these operations.
 
+</p>
+      <p>A <a data-link-type="dfn" href="#grid-item">grid item</a> establishes a new formatting context for its contents.
+	The type of this formatting context is determined by its <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> value, as usual.
+	The computed <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a> of a <a data-link-type="dfn" href="#grid-item">grid item</a>
+	is determined by applying the table in
+	<a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter 9.7</a>.
+	However, grid items are grid-level boxes, not block-level boxes:
+	they participate in their container’s <a data-link-type="dfn" href="#grid-formatting-context">grid formatting context</a>,
+	not in a block formatting context.</p>
+
+
+      <p>A <a data-link-type="dfn" href="#grid-item">grid item</a> is sized within the containing block defined by its <a data-link-type="dfn" href="#grid-area">grid area</a>
+	similarly to an equivalent block-level box in an equivalently-sized containing block,
+	except that <span class="css" data-link-for="margin">auto</span> margins and the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-align-3/#box-alignment-properties">box alignment properties</a>
+	have special effects. (See <a data-section="" href="#alignment">§9 
+Alignment</a>.)</p>
+
+
+
 
 
-</p>
       <h3 class="heading settled" data-level="4.1" id="visibility-collapse"><span class="secno">4.1. </span><span class="content">
 	Collapsed Grid Items: the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visufx.html#propdef-visibility">visibility</a> property</span><a class="self-link" href="#visibility-collapse"></a></h3>
 
@@ -4388,7 +4396,7 @@ <h2 class="heading settled" data-level="9" id="alignment"><span class="secno">9.
 
       <p>By default,
 	<a data-link-type="dfn" href="#grid-item">grid items</a> stretch to fill their <a data-link-type="dfn" href="#grid-area">grid area</a>.
-	However, if <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> compute to a value other than <span class="css">stretch</span>
+	However, if <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> compute to a value other than <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-content-distribution-stretch">stretch</a>
 	or margins are <a class="css" data-link-for="margin" data-link-type="value">auto</a>,
 	<a data-link-type="dfn" href="#grid-item">grid items</a> will auto-size to fit their contents.</p>
 
@@ -4537,7 +4545,7 @@ <h3 class="heading settled" data-level="9.5" id="grid-baselines"><span class="se
 
 
       <p>A <a data-link-type="dfn" href="#grid-item">grid item</a> <dfn data-dfn-type="dfn" data-export="" id="baseline-participation">participates in baseline alignment<a class="self-link" href="#baseline-participation"></a></dfn> in a particular dimension
-	if its value for <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a>, as appropriate, is <span class="css">baseline</span>
+	if its value for <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-align-self">align-self</a> or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-align-3/#propdef-justify-self">justify-self</a>, as appropriate, is <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-justify-self-justify-items-align-content-align-self-align-items-baseline">baseline</a>
 	and its inline axis is parallel to that dimension.</p>