[css-grid-2] Initial integration of per-axis subgrid proposal into main spec text.

Author: fantasai

css-grid-2/Overview.bs

@@ -15,48 +15,51 @@ Abstract: This CSS module defines a two-dimensional grid-based layout system, op
 Introduction {#intro}
 =====================
 
-This level is currently maintained as a diff spec over the level 1 module [[!CSS-GRID-1]].
-It adds the following features:
+	This level is currently maintained as a diff spec over the level 1 module [[!CSS-GRID-1]].
+	The main addition to Level 1 is the “subgrid” feature,
+	which has two proposals:
 
-  * Subgrids
-  * Aspect-ratio-controlled gutters
-
-Issue: The full text of the Grid specification will be folded in for CR.
-
-<h2 id="grid-model">
-Grid Containers</h2>
+	<ul>
+		<li>
+			<a href="#subgrid-per-axis">Per-axis Subgrids</a>,
+			which use a ''grid-template-columns/subgrid'' keyword on the 'grid-template' properties
+			to mark one or both axes as subgridded.
+			This proposal is strictly more powerful.
+	 <li>
+			<a href="#subgrid-dual-axis">Dual-axis Subgrids</a>,
+			whic use a ''grid-template-columns/subgrid'' keyword on the 'display' property
+			to mark both axes as subgridded.
+			This proposal is strictly more limited.
+	</ul>
 
-<h3 id='grid-containers'>
-Establishing Grid Containers: the ''subgrid'' 'display' value</h3>
+	A subgridded axis is one which matches up its grid lines
+	to lines in the element's parent's grid,
+	and which derives the sizes of its tracks
+	through this integration with the parent grid.
+	In general, the behavior of subgrids are the same in both proposals:
+	it is only a question of whether a single-axis subgrid is possible.
 
-	<a>Subgrids</a> provide the ability to pass grid parameters down through nested elements,
-	and content-based sizing information back up to their parent grid.
-
-	<pre class="propdef">
-	Name: display
-	New values: subgrid
-	</pre>
+	Issue: The full text of the Grid specification will be folded in when this draft reaches CR.
 
-	<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>
-			(which is a special type of <a>grid container</a> box, see [[#subgrids]])
-			and consequently ignores its 'grid-template-*' and 'grid-*-gap' properties
-			in favor of adopting the parent grid tracks that it spans.
+<!--
+ ██████  ██     ██ ████████   ██████   ████████  ████ ████████
+██    ██ ██     ██ ██     ██ ██    ██  ██     ██  ██  ██     ██
+██       ██     ██ ██     ██ ██        ██     ██  ██  ██     ██
+ ██████  ██     ██ ████████  ██   ████ ████████   ██  ██     ██
+      ██ ██     ██ ██     ██ ██    ██  ██   ██    ██  ██     ██
+██    ██ ██     ██ ██     ██ ██    ██  ██    ██   ██  ██     ██
+ ██████   ███████  ████████   ██████   ██     ██ ████ ████████
+-->
 
-			Otherwise,
-			it behaves as ''grid''.
-	</dl>
+<h2 id="subgrid-per-axis">
+Subgrids: per-axis proposal</h2>
 
 <div class="issue">
 	There is a proposal to have ''subgrid'' be instead a keyword
 	for 'grid-template-rows' and 'grid-template-columns',
 	which would allow subgridding to apply to a single axis,
 	not only both axes simultaneously.
-	The same constraints apply as specified in <a href="#subgrids"></a>,
+	The same constraints apply as specified for dual-axis subgrids via 'display',
 	but only to the subgridded dimension.
 
 	As with the ''display: subgrid'' proposal,
@@ -137,16 +140,6 @@ Establishing Grid Containers: the ''subgrid'' 'display' value</h3>
 	</ol>
 </div>
 
-<!--
- ██████  ██     ██ ████████   ██████   ████████  ████ ████████
-██    ██ ██     ██ ██     ██ ██    ██  ██     ██  ██  ██     ██
-██       ██     ██ ██     ██ ██        ██     ██  ██  ██     ██
- ██████  ██     ██ ████████  ██   ████ ████████   ██  ██     ██
-      ██ ██     ██ ██     ██ ██    ██  ██   ██    ██  ██     ██
-██    ██ ██     ██ ██     ██ ██    ██  ██    ██   ██  ██     ██
- ██████   ███████  ████████   ██████   ██     ██ ████ ████████
--->
-
 <h2 id="subgrids">
 Subgrids</h2>
 
@@ -155,8 +148,7 @@ Subgrids</h2>
 
 	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 and columns to its parent <a>grid container</a>
-	by using ''display: subgrid'',
+	can defer the definition of its rows and columns to its parent <a>grid container</a>,
 	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>,
@@ -182,11 +174,11 @@ Subgrids</h2>
 				grid: auto-flow / auto 1fr;
 			}
 			li {
-				display: subgrid;
 				grid-column: span 2;
-				margin: 0.5em;
+				<del>display: subgrid;</del>
+				<ins>display: grid;
+				grid: subgrid;</ins>
 				border: solid;
-				padding: 0.5em;
 			}
 			label {
 				grid-column: 1;
@@ -196,12 +188,66 @@ Subgrids</h2>
 			}
 		</pre>
 	</div>
+<h3 id="subgrid-dual-axis">
+Establishing a Subgrid: Dual-axis Proposal</h3>
+
+	<a>Subgrids</a> provide the ability to pass grid parameters down through nested elements,
+	and content-based sizing information back up to their parent grid.
+
+	<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>
+			(which is a special type of <a>grid container</a> box, see [[#subgrids]])
+			and consequently ignores its 'grid-template-*' and '*-gap' properties
+			in favor of adopting the parent grid tracks that it spans.
+
+			Otherwise,
+			it behaves as ''grid''.
+	</dl>
+
+	Issue: This syntax only allows for subgrids which are subgridded in both axes.
+
+<h3 id="subgrid-per-axis">
+Establishing a Subgrid: Per-Axis Proposal</h3>
+
+	<a>Subgrids</a> provide the ability to pass grid parameters down through nested elements,
+	and content-based sizing information back up to their parent grid.
+
+	<pre class="propdef">
+	Name: grid-template-rows, grid-template-columns
+	New values: subgrid
+	</pre>
+
+	<dl dfn-for="display" dfn-type=value>
+		<dt><dfn>subgrid</dfn>
+		<dd>
+			Tracks are <a>subgridded</a> in this axis:
+			the tracks are adopted from the the parent grid tracks that it spans.
+			If there is no parent grid, equivalent to
+			the initial value, ''grid-template-rows/none''.
+	</dl>
+
+	Issue: This syntax allows for subgrids which are subgridded in one <em>or</em> both axes.
+
+<h2 id="subgrid-rules">
+Subgrid Rules</h2>
+
+	Note: <ins>Insertions</ins> are differences between the dual-axis and per-axis proposals.
 
 	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>,
+			The number of explicit tracks in each <ins>subgridded</ins> dimension
+			is given by its <a>grid span</a> in that dimension,
 			rather than by 'grid-template-rows'/'grid-template-columns'.
 
 		<li>
@@ -210,11 +256,19 @@ Subgrids</h2>
 			E.g., numeric indices count starting from the first line of the subgrid
 			rather than the first line of the parent grid.
 
+		<li>
+			Since <a>subgrids</a> can be placed before their contents are placed,
+			<del>their</del> <ins>the subgridded</ins> lines
+			automatically receive the line names specified on the parent <a>grid</a>.
+
 		<li>
 			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.
+			but acts as if it was completely empty for sizing purposes
+			<ins>in the subgridded dimension</ins>.
 
-			The <a>subgrid</a>'s own <a>grid items</a> participate in the sizing of its parent grid and are aligned to it.
+			The <a>subgrid</a>'s own <a>grid items</a> participate
+			in the sizing of its parent grid <ins>in the subgridded dimension(s)</ins>
+			and are aligned to it <ins>in those dimensions</ins>.
 			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.
 
@@ -241,18 +295,20 @@ Subgrids</h2>
 				<pre>#subgrid { padding: 100px; }</pre>
 
 				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
+				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>
 
 		<li>
-			The 'grid-gap' properties do not apply to subgrids.
-			(Their items are instead spaced by the 'grid-gap' of their parent grid,
+			The 'gap' properties do not apply <del>to subgrids</del>
+			<ins>in the subgridded dimension(s)</ins>.
+			(Their items are instead spaced by the corresponding gutters of their parent grid,
 			since they are laid out in the parent grid.)
 
 		<li>
-			The <a>subgrid</a> does not have any <a>implicit grid tracks</a>;
+			The <a>subgrid</a> does not have any <a>implicit grid tracks</a>
+			<ins>in the subgridded dimension(s)</ins>;
 			every <a>grid area</a> within it is <a>clamped</a> to its <a>explicit grid</a>.
 
 			<div class="example">
@@ -261,24 +317,21 @@ Subgrids</h2>
 			</div>
 
 		<li>
-			The <a>subgrid</a> is always stretched in both dimensions:
+			The <a>subgrid</a> is always stretched <del>in both dimensions</del> <ins>in its subgridded dimension(s)</ins>:
 			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>
+			Layoutwise, the <a>subgrid</a>’s <a>grid</a>
 			is always aligned with the corresponding section of the parent <a>grid</a>;
-			the 'align-content'/'justify-content' properties on it are also ignored.
+			the 'align-content'/'justify-content' properties on it are also ignored
+			<ins>in the subgridded dimension</ins>.
 
 		<li>
 			The UA <em>may</em> apply 'overflow' to <a>subgrids</a>
-			so the contents of the subgrid can be scrolled aside.
+			so that overflowing contents of the subgrid can be scrolled into view.
 			(Note: the act of scrolling does not affect layout.)
 			Overflow must otherwise be treated as ''visible''.
-
-		<li>
-			Since <a>subgrids</a> can be placed before their contents are placed,
-			their lines automatically receive the line names specified on the parent <a>grid</a>.
 	</ul>
 
 <h2 id=alignment>