simonwuelker
diff --git a/‎css-grid/Overview.bs‎
Lines changed: 73 additions & 107 deletions b/‎css-grid/Overview.bs‎
Lines changed: 73 additions & 107 deletions
@@ -25,7 +25,7 @@ Abstract: This CSS module defines a two-dimensional grid-based layout system, op
 Ignored Terms: containing block, <positive-integer>, <ident>, auto, grid-*-start, grid-*-end, flex factor, flex factors, block formatting context, grid-auto-position, min size property, max size property
 Ignored Vars: A, B, C, size-contribution, track-sizes, extra-space
 Link Defaults: css21 (property) margin/min-height/max-height/min-width/max-width, css-align-3 (dfn) alignment container/alignment subject/box alignment properties, css-align-3 (value) stretch/baseline, css-position-3 (property) left, css-position-3 (property) position, css-writing-modes-3 (dfn) start/end
-At Risk: the ''grid-template-rows/subgrid'' value of 'grid-template-columns' and 'grid-template-rows', and its component parts individually
+At Risk: the ''display/subgrid'' value
 At Risk: the <<percentage>> value in 'grid-row-gap'/'grid-column-gap'
 </pre>
 
@@ -1120,7 +1120,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
 
 	<pre class='propdef'>
 	Name: grid-template-columns, grid-template-rows
-	Value: none | <<track-list>> | <<auto-track-list>> | subgrid <<line-name-list>>?
+	Value: none | <<track-list>> | <<auto-track-list>>
 	Initial: none
 	Applies to: <a>grid containers</a>
 	Inherited: no
@@ -1157,16 +1157,6 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
 			which can combine any of the previously mentioned mechanisms
 			to specify separate <a lt="min track sizing function">min</a>
 			and <a>max track sizing functions</a> for the column or row.
-
-		<dt><dfn id="subgrid-listing">subgrid <<line-name-list>></dfn>
-		<dd>
-			The <dfn value for="grid-template-rows, grid-template-columns">subgrid</dfn> value
-			indicates that the grid will adopt the spanned portion of its parent grid in that axis.
-			Rather than being specified explicitly, the sizes of the grid rows/columns
-			will be taken from the parent grid's definition.
-			See [[#subgrids]].
-
-			The <<line-name-list>> argument allows local naming of the grid lines propagated from the parent grid.
 	</dl>
 
 	The syntax of a <a>track list</a> is:
@@ -1175,7 +1165,6 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
 		<dfn>&lt;track-list></dfn>         = [ <<line-names>>? [ <<track-size>> | <<track-repeat>> ] ]+ <<line-names>>?
 		<dfn>&lt;auto-track-list></dfn>    = [ <<line-names>>? [ <<fixed-size>> | <<fixed-repeat>> ] ]+ <<auto-repeat>>
 		                       [ <<line-names>>? [ <<fixed-size>> | <<fixed-repeat>> ] ]+ <<line-names>>?
-		<dfn>&lt;line-name-list></dfn>     = [ <<line-names>> | <<name-repeat>> ]+
 
 		<dfn>&lt;track-size></dfn>         = <<track-breadth>> | minmax( <<inflexible-breadth>> , <<track-breadth>> )
 		<dfn>&lt;fixed-size></dfn>         = <<fixed-breadth>> | minmax( <<fixed-breadth>> , <<track-breadth>> ) | minmax( <<inflexible-breadth>> , <<fixed-breadth>> )
@@ -1383,7 +1372,6 @@ Syntax of ''repeat()''</h5>
 			cannot be combined with
 			<a lt="intrinsic sizing function">intrinsic</a>
 			or <a lt="flexible sizing function">flexible</a> sizes.
-		* Subgrids can only repeat names, not sizes.
 
 	Thus the precise syntax of the ''repeat()'' notation
 	has several forms:
@@ -1392,7 +1380,6 @@ Syntax of ''repeat()''</h5>
 		<dfn><<track-repeat>></dfn> = repeat( [ <<positive-integer>> ]  , [ <<line-names>>? <<track-size>> ]+ <<line-names>>? )
 		<dfn><<auto-repeat>></dfn>  = repeat( [ auto-fill | auto-fit ],   <<line-names>>? <<fixed-size>>    <<line-names>>? )
 		<dfn><<fixed-repeat>></dfn> = repeat( [ <<positive-integer>> ]  , [ <<line-names>>? <<fixed-size>> ]+ <<line-names>>? )
-		<dfn><<name-repeat>></dfn>  = repeat( [ <<positive-integer>> | auto-fill ], <<line-names>>+)
 	</pre>
 
 	* The <<track-repeat>> variant can represent the repetition of any <<track-size>>,
@@ -1401,12 +1388,6 @@ Syntax of ''repeat()''</h5>
 		but requires <a>definite</a> track sizes so that the number of repetitions can be calculated.
 		It can only appear once in the <a>track list</a>,
 		but the same <a>track list</a> can also contain <<fixed-repeat>>s.
-	* The <<name-repeat>> variant is for adding line names to <a href="#subgrids">subgrids</a>
-		and can only be used with the ''grid-template-rows/subgrid'' keyword:
-		it only repeats names.
-		The ''auto-fill'' keyword is only valid once per <<line-name-list>>,
-		and repeats enough times for the name list to match the subgrid’s specified <a>grid span</a>
-		(defaulting to 0 if that is ''auto'' or if the span is already fulfilled).
 
 	If the ''repeat()'' function ends up placing two <<line-names>> adjacent to each other,
 	the name lists are merged.
@@ -1722,7 +1703,7 @@ Explicit Grid Shorthand: the 'grid-template' property</h3>
 
 	<pre class='propdef'>
 	Name: grid-template
-	Value: none | subgrid |
+	Value: none |
 	Value: <nobr>[ <<'grid-template-rows'>> / <<'grid-template-columns'>> ]</nobr> |
 	Value: <nobr>[ <<line-names>>? <<string>> <<track-size>>? <<line-names>>? ]+ [ / <<track-list>> ]?</nobr>
 	Initial: see individual properties
@@ -1742,11 +1723,6 @@ Explicit Grid Shorthand: the 'grid-template' property</h3>
 		<dd>
 			Sets all three properties to their initial values (''grid-template-rows/none'').
 
-		<dt><dfn>subgrid</dfn>
-		<dd>
-			Sets 'grid-template-rows' and 'grid-template-columns' to ''grid-template-rows/subgrid'',
-			and 'grid-template-areas' to its initial value.
-
 		<dt><dfn id='grid-template-rowcol'><<'grid-template-rows'>> / <<'grid-template-columns'>></dfn>
 		<dd>
 			Sets 'grid-template-rows' and 'grid-template-columns' to the specified values, respectively,
@@ -2217,29 +2193,49 @@ Grid Definition Shorthand: the 'grid' property</h3>
 -->
 
 <h2 id="subgrids">
-Subgrids: the ''grid-template-rows/subgrid'' keyword</h2>
+Subgrids</h2>
 
-	Issue: This section is under discussion and will likely change significantly in the near future.
+	Issue: This section is under discussion and has not been finalized.
+	The current text reflects <a href="https://lists.w3.org/Archives/Public/www-style/2016Apr/0254.html">this proposal</a> in preparation for WG discussion.
 
 	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.
+	can defer the definition of its rows and columns to its parent <a>grid container</a>
+	by using ''display: subgrid'',
+	making it a <dfn export>subgrid</dfn>.
 	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).
+<h3 id='subgrid-items'>
+Establishing Subgrids: the ''subgrid'' 'display' value</h3>
+
+	<pre class="propdef">
+	Name: display
+	New values: subgrid
+	</pre>
+
+	<dl dfn-for="display" dfn-type=value>
+		<dt><dfn>subgrid</dfn>
+		<dd>
+			If the element is a <a>grid item</a>
+			(i.e. it is in-flow and its parent is a <a>grid container</a>),
+			this value makes the element a <a>subgrid</a>.
+
+			Otherwise,
+			it behaves as ''grid''.
+
+			Issue: Should we make this contingent on whether grid-template-* have their initial values,
+			in case we want to expand this behavior in the future?
+			(Since grid-template-* is ignored by subgrids right now.)
+	</dl>
 
 	<div class="example">
 			For example, suppose we have a form consisting of a list of inputs with labels:
-		<pre>
+		<pre class="lang-html">
 			&lt;ul>
 				&lt;li>&lt;label>Name:&lt;/label> &lt;input name=fn>
 				&lt;li>&lt;label>Address:&lt;/label> &lt;input name=address>
@@ -2253,12 +2249,11 @@ Subgrids: the ''grid-template-rows/subgrid'' keyword</h2>
 		<pre>
 			ul {
 				display: grid;
-				grid-auto-flow: row;
-				grid-template-columns: auto 1fr;
+				grid: auto-flow / auto 1fr;
 			}
 			li {
-				display: grid;
-				grid: subgrid;
+				display: subgrid;
+				grid-column: span 2;
 				margin: 0.5em;
 				border: solid;
 				padding: 0.5em;
@@ -2278,8 +2273,6 @@ Subgrids: the ''grid-template-rows/subgrid'' keyword</h2>
 		<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>
@@ -2288,15 +2281,20 @@ Subgrids: the ''grid-template-rows/subgrid'' keyword</h2>
 			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.
+			The <a>subgrid</a> itself lays out as an ordinary <a>grid item</a> in its parent grid,
+			but acts as if it was completely empty for sizing purposes.
+
+			The <a>subgrid</a>'s own <a>grid items</a> 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 at each edge
+			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,
+				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.
@@ -2312,50 +2310,41 @@ Subgrids: the ''grid-template-rows/subgrid'' keyword</h2>
 
 				<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).
+				Then a <a>grid item</a> in the <a>subgrid's</a> first track
+				acts as if it has an additional ''100px'' of top, left, and bottom margin
+				influencing the sizing of the parent grid's tracks
+				and the <a>grid item's</a> own position.
 			</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.
+		<li>
+			The <a>subgrid</a> does not have any <a>implicit grid tracks</a>;
+			every <a>grid area</a> within it is <a>clamped</a> to its <a>explicit grid</a>.
 
 			<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>.
+				For example, if a ''span 1'' subgrid has a <a>grid item</a> with ''grid-column: 2 / span 3;'',
+				then that item is instead forced into (and limited to) the first (only) track in the subgrid.
 			</div>
 
+			Issue: Alternately,
+			since this is an error case,
+			should we instead make the item span the entire subgrid,
+			so it's more obvious that something is wrong?
+
 		<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.
+			The <a>subgrid</a> is always stretched in both dimensions:
+			the 'align-self'/'justify-self' properties on it are ignored,
+			as are any specified width/height constraints.
 
 		<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.
+			the 'align-content'/'justify-content' properties on it are also ignored.
+
+		<li>
 			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,
@@ -2364,6 +2353,10 @@ Subgrids: the ''grid-template-rows/subgrid'' keyword</h2>
 			Issue: People should review how subgrid line names are assigned, to ensure it is sane and useful.
 	</ul>
 
+	Issue: Need to expand grid-auto-rows/columns to allow for multi-track repetition,
+	so you can auto-generate properly-sized subgridded rows
+	in cases such as a catalog listing.
+
 <!--
 ████████  ██          ███     ██████  ████ ██    ██  ██████
 ██     ██ ██         ██ ██   ██    ██  ██  ███   ██ ██    ██
@@ -2399,9 +2392,8 @@ Placing Grid Items</h2>
 		<dt><dfn export local-lt="span|row span|column span">grid span</dfn>
 		<dd>
 			How many <a>grid tracks</a> the <a>grid item</a> occupies.
-			A <a>subgrid</a>’s <a>grid span</a> can be <dfn lt="automatic grid span|automatic row span|automatic column span|automatic span">automatic</dfn>
-			(determined by its <a>implicit grid</a>) if not specified or implied;
-			a <a>grid item</a>’s <a>grid span</a> is otherwise always <dfn export lt="definite grid span|definite row span|definite column span|definite span">definite</dfn> (defaulting to 1).
+			A <a>grid item</a>’s <a>grid span</a> is always <dfn export lt="definite grid span|definite row span|definite column span|definite span">definite</dfn>,
+			defaulting to 1 if it can't be otherwise determined.
 	</dl>
 
 	The <dfn export lt="grid-placement property">grid-placement properties</dfn>--
@@ -2444,11 +2436,11 @@ Placing Grid Items</h2>
 			<tr>
 				<th>Definite
 				<td>At least one specified line
-				<td>Explicit, implicit, or defaulted span. <br> <span class="note">Note: Non-<a>subgrids</a> default to 1.</span>
+				<td>Explicit, implicit, or defaulted span.
 			<tr>
 				<th>Automatic
 				<td>No lines explicitly specified
-				<td><a>Subgrid</a> without an explicit or implied span
+				<td>N/A
 	</table>
 
 
@@ -2613,30 +2605,6 @@ Auto Placement</h4>
 	To change this behavior,
 	specify the ''dense'' keyword in 'grid-auto-flow'.
 
-<h4 id='common-uses-auto-sizing'>
-Auto Sizing Subgrids</h4>
-
-	A subgrid without a <a>definite grid span</a> is sized to its <a>implicit grid</a>,
-	i.e. all of its items within it are first placed into its own grid,
-	and its span is the resulting size of its grid.
-
-	<div class='example'>
-		For example, a subgrid spanning two columns can be given an auto-spanning <a>block size</a>:
-		<pre>
-			.adverts {
-				grid: subgrid;
-				grid-column: span 2;
-			}
-		</pre>
-
-		If it contains 10 auto-placed items, 2 items will be placed each row, spanning 5 rows of its parent.
-	</div>
-
-	Note: Since auto-spanning <a>subgrids</a> determine their span before being positioned,
-	they can also be auto-positioned.
-	The above example would auto-place the <code>.adverts</code> block,
-	if no further rules specified its position.
-
 <h3 id="placement-a11y">
 Grid Item Placement vs. Source Order</h3>
 
@@ -2780,7 +2748,7 @@ Line-based Placement: the 'grid-row-start', 'grid-column-start', 'grid-row-end',
 		<dt><dfn id='grid-placement-auto'>auto</dfn>
 		<dd>
 			The property contributes nothing to the <a>grid item</a>’s <a>placement</a>,
-			indicating <a>auto-placement</a>, an <a>automatic span</a>, or a default span of one.
+			indicating <a>auto-placement</a> or a default span of one.
 			(See [[#placement]], above.)
 	</dl>
 
@@ -2937,9 +2905,7 @@ Grid Item Placement Algorithm</h3>
 	ensuring that every <a>grid item</a> has a well-defined <a>grid area</a> to lay out into.
 	(<a>Grid spans</a> need no special resolution;
 		if they're not explicitly specified,
-		they default to either 1 or,
-		for <a>subgrids</a>,
-		the size of their <a>explicit grid</a>.)
+		they default to 1.)
 
 	Note: This algorithm can result in the creation of new rows or columns in the <a>implicit grid</a>,
 	if there is no room in the <a>explicit grid</a> to place an auto-positioned <a>grid item</a>.