[css-grid] Move subgrid section. Add issue.

Author: fantasai

css-grid/Overview.bs

@@ -1504,162 +1504,6 @@ Flexible Lengths: the ''fr'' unit</h4>
 	The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),
 	which is then multiplied by each <a>grid track</a>’s <a>flex factor</a> to determine its final size.
 
-<!--
- ██████  ██     ██ ████████   ██████   ████████  ████ ████████
-██    ██ ██     ██ ██     ██ ██    ██  ██     ██  ██  ██     ██
-██       ██     ██ ██     ██ ██        ██     ██  ██  ██     ██
- ██████  ██     ██ ████████  ██   ████ ████████   ██  ██     ██
-      ██ ██     ██ ██     ██ ██    ██  ██   ██    ██  ██     ██
-██    ██ ██     ██ ██     ██ ██    ██  ██    ██   ██  ██     ██
- ██████   ███████  ████████   ██████   ██     ██ ████ ████████
--->
-
-<h4 id="subgrids">
-Subgrids: the ''grid-template-rows/subgrid'' keyword</h4>
-
-	A <a>grid item</a> can itself be a <a>grid container</a> by giving it ''display: grid'';
-	in this case the layout of its contents will be independent of the layout of the grid it participates in.
-
-	In some cases it might be necessary for the contents of multiple <a>grid items</a> to align to each other.
-	A <a>grid container</a> that is itself a <a>grid item</a>
-	can defer the definition of its rows or columns to its parent <a>grid container</a>
-	by using the ''grid-template-rows/subgrid'' keyword in 'grid-template-rows' and/or 'grid-template-columns',
-	making it a <dfn export>subgrid</dfn> in that dimension.
-	In this case, the <a>grid items</a> of the <a>subgrid</a>
-	participate in sizing the <a>grid</a> of the parent <a>grid container</a>,
-	allowing the contents of both grids to align.
-
-	If a <a>grid container</a> that is <em>not</em> a <a>grid item</a> uses the ''grid-template-rows/subgrid'' keyword,
-	its 'grid-template-rows'/'grid-template-columns' value is treated identically to ''grid-template-rows/none''
-	(i.e. it doesn't have an <a>explicit grid</a> in that dimension).
-
-	<div class="example">
-			For example, suppose we have a form consisting of a list of inputs with labels:
-		<pre>
-			&lt;ul>
-				&lt;li>&lt;label>Name:&lt;/label> &lt;input name=fn>
-				&lt;li>&lt;label>Address:&lt;/label> &lt;input name=address>
-				&lt;li>&lt;label>Phone:&lt;/label> &lt;input name=phone>
-			&lt;/ul>
-		</pre>
-
-		We want the labels and inputs to align, and we want to style each list item with a border.
-		This can be accomplished with subgrid layout:
-
-		<pre>
-			ul {
-				display: grid;
-				grid-auto-flow: row;
-				grid-template-columns: auto 1fr;
-			}
-			li {
-				display: grid;
-				grid: subgrid;
-				margin: 0.5em;
-				border: solid;
-				padding: 0.5em;
-			}
-			label {
-				grid-column: 1;
-			}
-			input {
-				grid-column: 2;
-			}
-		</pre>
-	</div>
-
-	A <a>subgrid</a> behaves just like a normal <a>grid container</a> except that:
-
-	<ul style="list-style-type: lower-alpha">
-		<li>
-			The number of explicit tracks is given by its <a>grid span</a>,
-			rather than by 'grid-template-rows'/'grid-template-columns'.
-			If the grid has an <a>automatic grid span</a>,
-			the number of tracks is determined by the size of the <a>subgrid</a>’s <a>implicit grid</a>.
-
-		<li>
-			The <a>grid-placement properties</a> of the <a>subgrid</a>’s <a>grid items</a>
-			are scoped to the lines covered by the subgrid.
-			E.g., numeric indices count starting from the first line of the subgrid
-			rather than the first line of the parent grid.
-
-		<li>
-			The <a>subgrid</a>'s own grid items participate in the sizing of its parent grid and are aligned to it.
-			In this process, the sum of the <a>subgrid</a>'s margin, padding, and borders are applied as an extra layer of margin to the items at those edges.
-
-			<div class="example">
-				For example, if we have a 3&times;3 grid with the following tracks:
-
-				<pre>#parent-grid { grid-template-columns: 300px auto 300px; }</pre>
-
-				If a subgrid covers the last two tracks, its first two columns correspond to the parent grid's last two columns,
-				and any items positioned into those tracks participate in sizing the parent grid.
-				Specifically, an item positioned in the first track of the subgrid
-				influences the auto-sizing of the parent grid's middle track.
-
-				<pre>
-					#subgrid { grid-column: 2 / span 2; } /* cover parent's 2nd and 3rd tracks */
-					#subgrid > :first-child { grid-column: 1; } /* subgrid's 1st track, parent grid's 2nd track */
-				</pre>
-
-				If the subgrid has margins/borders/padding,
-				the the size of those margins/borders/padding also influence sizing.
-				For example, if the subgrid has 100px padding:
-
-				<pre>#subgrid { padding: 100px; }</pre>
-
-				Then when the parent grid auto-sizes its second track,
-				it will be at least 100px wider than any items in the subgrid's first track,
-				and any items in the subgrid's second track will be sized to fit a slot 200px wide (instead of 300px wide).
-			</div>
-
-			However, any overflow tracks
-			(i.e. those outside the <a>explicit grid</a> when the <a>subgrid</a> has a <a>definite grid span</a>)
-			do not correspond to any tracks in the parent grid;
-			they effectively extend in a third dimension.
-
-			<div class="example">
-				For example, if a parent grid has adjacent tracks <var>A</var>, <var>B</var>, and <var>C</var>,
-				and a ''span 1'' subgrid with an extra <a>implicit grid track</a> is placed in track <var>B</var>,
-				the items in that <a>implicit grid track</a> are not considered part of track <var>B</var>.
-			</div>
-
-		<li>
-			The <a>subgrid</a> is always stretched in its subgridded dimension:
-			the 'align-self'/'justify-self' properties on it are ignored in that dimension,
-			and any specified width/height constraints are also ignored in that dimension.
-
-		<li>
-			Layoutwise, the <a>subgrid</a>’s <a>explicit grid</a> is always aligned with the corresponding section of the parent <a>grid</a>;
-			the 'align-content'/'justify-content' properties on it are ignored.
-			However, 'overflow' does apply,
-			so the contents of the subgrid can be scrolled aside.
-			(Note: the act of scrolling does not affect layout.)
-
-		<li>
-			Explicit named lines can also be specified together with the ''grid-template-rows/subgrid'' keyword;
-			these names apply (within the <a>subgrid</a>) to the corresponding lines of the parent <a>grid</a>.
-			If the <a>subgrid</a> has an explicit <a>grid span</a>,
-			any names specified for lines beyond the span are ignored.
-
-			<div class="example">
-				For example, if the subgrid above were specified with 5 names:
-
-				<pre>#subgrid { grid-template-columns: subgrid [first] [second] [third] [fourth] [fifth]; }</pre>
-
-				Items within the subgrid could be positioned using the first four line names;
-				the last name would be ignored (as if it didn't exist),
-				since the subgrid only covers four lines.
-			</div>
-
-			If the <a>subgrid</a> has an explicit <a>grid position</a> as well as an explicit <a>grid span</a>,
-			it also automatically receives the line names specified for its parent <a>grid</a>.
-			(In such cases the author can rely on the names specified in the parent grid,
-			and does not need to duplicate those names in each subgrid declaration.)
-
-			Issue: People should review how subgrid line names are assigned, to ensure it is sane and useful.
-	</ul>
-
 <!--
 ████████  ████████  ██████   ███████  ██       ██     ██ ████████ ████████
 ██     ██ ██       ██    ██ ██     ██ ██       ██     ██ ██       ██     ██
@@ -2361,6 +2205,165 @@ Grid Definition Shorthand: the 'grid' property</h3>
 	Issue: The auto-placed grid shorthand syntax isn't particularly useful.
 	An auto-placed grid needs an auto axis, but also an explicit axis.
 
+
+<!--
+ ██████  ██     ██ ████████   ██████   ████████  ████ ████████
+██    ██ ██     ██ ██     ██ ██    ██  ██     ██  ██  ██     ██
+██       ██     ██ ██     ██ ██        ██     ██  ██  ██     ██
+ ██████  ██     ██ ████████  ██   ████ ████████   ██  ██     ██
+      ██ ██     ██ ██     ██ ██    ██  ██   ██    ██  ██     ██
+██    ██ ██     ██ ██     ██ ██    ██  ██    ██   ██  ██     ██
+ ██████   ███████  ████████   ██████   ██     ██ ████ ████████
+-->
+
+<h2 id="subgrids">
+Subgrids: the ''grid-template-rows/subgrid'' keyword</h2>
+
+	Issue: This section is under discussion and will likely change significantly in the near future.
+
+	A <a>grid item</a> can itself be a <a>grid container</a> by giving it ''display: grid'';
+	in this case the layout of its contents will be independent of the layout of the grid it participates in.
+
+	In some cases it might be necessary for the contents of multiple <a>grid items</a> to align to each other.
+	A <a>grid container</a> that is itself a <a>grid item</a>
+	can defer the definition of its rows or columns to its parent <a>grid container</a>
+	by using the ''grid-template-rows/subgrid'' keyword in 'grid-template-rows' and/or 'grid-template-columns',
+	making it a <dfn export>subgrid</dfn> in that dimension.
+	In this case, the <a>grid items</a> of the <a>subgrid</a>
+	participate in sizing the <a>grid</a> of the parent <a>grid container</a>,
+	allowing the contents of both grids to align.
+
+	If a <a>grid container</a> that is <em>not</em> a <a>grid item</a> uses the ''grid-template-rows/subgrid'' keyword,
+	its 'grid-template-rows'/'grid-template-columns' value is treated identically to ''grid-template-rows/none''
+	(i.e. it doesn't have an <a>explicit grid</a> in that dimension).
+
+	<div class="example">
+			For example, suppose we have a form consisting of a list of inputs with labels:
+		<pre>
+			&lt;ul>
+				&lt;li>&lt;label>Name:&lt;/label> &lt;input name=fn>
+				&lt;li>&lt;label>Address:&lt;/label> &lt;input name=address>
+				&lt;li>&lt;label>Phone:&lt;/label> &lt;input name=phone>
+			&lt;/ul>
+		</pre>
+
+		We want the labels and inputs to align, and we want to style each list item with a border.
+		This can be accomplished with subgrid layout:
+
+		<pre>
+			ul {
+				display: grid;
+				grid-auto-flow: row;
+				grid-template-columns: auto 1fr;
+			}
+			li {
+				display: grid;
+				grid: subgrid;
+				margin: 0.5em;
+				border: solid;
+				padding: 0.5em;
+			}
+			label {
+				grid-column: 1;
+			}
+			input {
+				grid-column: 2;
+			}
+		</pre>
+	</div>
+
+	A <a>subgrid</a> behaves just like a normal <a>grid container</a> except that:
+
+	<ul style="list-style-type: lower-alpha">
+		<li>
+			The number of explicit tracks is given by its <a>grid span</a>,
+			rather than by 'grid-template-rows'/'grid-template-columns'.
+			If the grid has an <a>automatic grid span</a>,
+			the number of tracks is determined by the size of the <a>subgrid</a>’s <a>implicit grid</a>.
+
+		<li>
+			The <a>grid-placement properties</a> of the <a>subgrid</a>’s <a>grid items</a>
+			are scoped to the lines covered by the subgrid.
+			E.g., numeric indices count starting from the first line of the subgrid
+			rather than the first line of the parent grid.
+
+		<li>
+			The <a>subgrid</a>'s own grid items participate in the sizing of its parent grid and are aligned to it.
+			In this process, the sum of the <a>subgrid</a>'s margin, padding, and borders are applied as an extra layer of margin to the items at those edges.
+
+			<div class="example">
+				For example, if we have a 3&times;3 grid with the following tracks:
+
+				<pre>#parent-grid { grid-template-columns: 300px auto 300px; }</pre>
+
+				If a subgrid covers the last two tracks, its first two columns correspond to the parent grid's last two columns,
+				and any items positioned into those tracks participate in sizing the parent grid.
+				Specifically, an item positioned in the first track of the subgrid
+				influences the auto-sizing of the parent grid's middle track.
+
+				<pre>
+					#subgrid { grid-column: 2 / span 2; } /* cover parent's 2nd and 3rd tracks */
+					#subgrid > :first-child { grid-column: 1; } /* subgrid's 1st track, parent grid's 2nd track */
+				</pre>
+
+				If the subgrid has margins/borders/padding,
+				the the size of those margins/borders/padding also influence sizing.
+				For example, if the subgrid has 100px padding:
+
+				<pre>#subgrid { padding: 100px; }</pre>
+
+				Then when the parent grid auto-sizes its second track,
+				it will be at least 100px wider than any items in the subgrid's first track,
+				and any items in the subgrid's second track will be sized to fit a slot 200px wide (instead of 300px wide).
+			</div>
+
+			However, any overflow tracks
+			(i.e. those outside the <a>explicit grid</a> when the <a>subgrid</a> has a <a>definite grid span</a>)
+			do not correspond to any tracks in the parent grid;
+			they effectively extend in a third dimension.
+
+			<div class="example">
+				For example, if a parent grid has adjacent tracks <var>A</var>, <var>B</var>, and <var>C</var>,
+				and a ''span 1'' subgrid with an extra <a>implicit grid track</a> is placed in track <var>B</var>,
+				the items in that <a>implicit grid track</a> are not considered part of track <var>B</var>.
+			</div>
+
+		<li>
+			The <a>subgrid</a> is always stretched in its subgridded dimension:
+			the 'align-self'/'justify-self' properties on it are ignored in that dimension,
+			and any specified width/height constraints are also ignored in that dimension.
+
+		<li>
+			Layoutwise, the <a>subgrid</a>’s <a>explicit grid</a> is always aligned with the corresponding section of the parent <a>grid</a>;
+			the 'align-content'/'justify-content' properties on it are ignored.
+			However, 'overflow' does apply,
+			so the contents of the subgrid can be scrolled aside.
+			(Note: the act of scrolling does not affect layout.)
+
+		<li>
+			Explicit named lines can also be specified together with the ''grid-template-rows/subgrid'' keyword;
+			these names apply (within the <a>subgrid</a>) to the corresponding lines of the parent <a>grid</a>.
+			If the <a>subgrid</a> has an explicit <a>grid span</a>,
+			any names specified for lines beyond the span are ignored.
+
+			<div class="example">
+				For example, if the subgrid above were specified with 5 names:
+
+				<pre>#subgrid { grid-template-columns: subgrid [first] [second] [third] [fourth] [fifth]; }</pre>
+
+				Items within the subgrid could be positioned using the first four line names;
+				the last name would be ignored (as if it didn't exist),
+				since the subgrid only covers four lines.
+			</div>
+
+			If the <a>subgrid</a> has an explicit <a>grid position</a> as well as an explicit <a>grid span</a>,
+			it also automatically receives the line names specified for its parent <a>grid</a>.
+			(In such cases the author can rely on the names specified in the parent grid,
+			and does not need to duplicate those names in each subgrid declaration.)
+
+			Issue: People should review how subgrid line names are assigned, to ensure it is sane and useful.
+	</ul>
+
 <!--
 ████████  ██          ███     ██████  ████ ██    ██  ██████
 ██     ██ ██         ██ ██   ██    ██  ██  ███   ██ ██    ██