[css-grid-2] Define gap handling for subgrids per discussion in w3c#2285. Many thanks to Dan503 (Daniel Tonon) for the illustrations.

Author: fantasai

css-grid-2/Overview.bs

@@ -164,11 +164,16 @@ Characteristics of a Subgrid Item</h3>
 			but acts as if it was completely empty for sizing purposes
 			in the subgridded dimension.
 
-			The <a>subgrid</a>'s own <a>grid items</a> participate
+		<li>The <a>subgrid</a>'s own <a>grid items</a> participate
 			in the sizing of its parent grid in the subgridded dimension(s)
 			and are aligned to it in those dimensions.
-			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.
+
+			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 (potentially negative) margin
+			to the items at those edges.
+			This extra layer of “margin” accumulates
+			through multiple levels of subgrids.
 
 			<div class="example">
 				For example, if we have a 3&times;3 grid with the following tracks:
@@ -198,14 +203,123 @@ Characteristics of a Subgrid Item</h3>
 				and the <a>grid item's</a> own position.
 			</div>
 
-		<li>
-			The 'gap' properties do not apply
-			in the subgridded dimension(s).
-			(Their items are instead spaced by the corresponding gutters of their parent grid,
-			since they are laid out in the parent grid.)
+			Meanwhile,
+			half the size of the difference between
+			the subgrid’s <a>gutters</a> ('row-gap'/'column-gap')
+			and its parent grid’s <a>gutters</a>
+			is applied as an extra layer of (potentially negative) margin
+			to the items not at those edges.
+			This extra layer of “margin” also accumulates
+			through multiple levels of subgrids.
+			A value of ''row-gap/normal''
+			indicates that the subgrid has the same size <a>gutters</a>
+			as its parent grid,
+			i.e. the applied difference is zero.
+
+			Note: The end result will be that the parent’s grid tracks
+			will be sized as specified,
+			and that the subgrid’s gaps will visually center-align
+			with the parent grid’s gaps.
 
-			ISSUE: See <a href="https://github.com/w3c/csswg-drafts/issues/2285">issue 2285</a>
-			for discussion about customizing gaps within the subgrid.
+			<div class="example">
+				<p>For example,
+				suppose we have a 300px-wide outer grid
+				with 50px gaps
+				and its columns specified as ''100px 1fr''.
+				A subgrid spanning both tracks would have&hellip;
+
+				<dl>
+					<dt>&hellip; if its 'column-gap' were ''column-gap/normal'':
+					<dd>
+						<ul>
+							<li>A grid item in its left column
+								sized and laid out
+								(and contributing its size to the parent grid’s sizing calculations)
+								without any special adjustment,
+								thus stretching to 100px wide
+								while remaining aligned
+								to the subgrid’s left edge.
+							<li>A grid item in its right column
+								sized and laid out
+								(and contributing its size to the parent grid’s sizing calculations)
+								without any special adjustment,
+								thus stretching to 175px wide,
+								while remaining aligned
+								to the subgrid’s right edge.
+							<li>An effective visual <a>gutter</a> between the items
+								of 50px, exactly matching its parent grid.
+						</ul>
+
+					<dt>&hellip; if its 'column-gap' were ''0'':
+					<dd>
+						<ul>
+							<li>A grid item in its left column
+								sized and laid out
+								(and contributing its size to the parent grid’s sizing calculations)
+								as if it had a -25px right margin,
+								thus stretching to 125px wide
+								while remaining aligned
+								to the subgrid’s left edge.
+							<li>A grid item in its right column
+								sized and laid out
+								(and contributing its size to the parent grid’s sizing calculations)
+								as if it had a -25px left margin,
+								thus stretching to 175px wide,
+								while remaining aligned
+								to the subgrid’s right edge.
+							<li>An effective visual <a>gutter</a> between the items
+								of zero, as specified by its 'column-gap'.
+						</ul>
+
+						<img src="images/subgrid-gap-0px.png" alt="">
+
+					<dt>&hellip; if its 'column-gap' were ''25px'':
+					<dd>
+						<ul>
+							<li>A grid item in its left column
+								sized and laid out
+								(and contributing its size to the parent grid’s sizing calculations)
+								as if it had a -12.5px right margin,
+								thus stretching to 112.5px wide
+								while remaining aligned
+								to the subgrid’s left edge.
+							<li>A grid item in its right column
+								sized and laid out
+								(and contributing its size to the parent grid’s sizing calculations)
+								as if it had a -12.5px left margin,
+								thus stretching to 162.5px wide,
+								while remaining aligned
+								to the subgrid’s right edge.
+							<li>An effective visual <a>gutter</a> between the items
+								of 25px, as specified by its 'column-gap'.
+						</ul>
+
+						<img src="images/subgrid-gap-25px.png" alt="">
+
+					<dt>&hellip; if its 'column-gap' were ''75px'':
+					<dd>
+						<ul>
+							<li>A grid item in its left column
+								sized and laid out
+								(and contributing its size to the parent grid’s sizing calculations)
+								as if it had a -37.5px right margin,
+								thus stretching to 87.5px wide
+								while remaining aligned
+								to the subgrid’s left edge.
+							<li>A grid item in its right column
+								sized and laid out
+								(and contributing its size to the parent grid’s sizing calculations)
+								as if it had a -37.5px left margin,
+								thus stretching to 137.5px wide,
+								while remaining aligned
+								to the subgrid’s right edge.
+							<li>An effective visual <a>gutter</a> between the items
+								of 75px, as specified by its 'column-gap'.
+						</ul>
+
+						<img src="images/subgrid-gap-75px.png" alt="">
+				</dl>
+			</div>
 
 		<li>
 			The <a>subgrid</a> does not have any <a>implicit grid tracks</a>
@@ -542,3 +656,26 @@ Aspect-ratio&ndash;controlled Gutters</h2>
 			}
 		</pre>
 	</div>
+
+<h2 id="acknowledgements">
+Acknowledgements</h2>
+
+	Many thanks to Mats Palmgren of Mozilla,
+	without whose support and feedback the subgrid feature
+	would not be able to move forward.
+	Thanks also to Daniel Tonon,
+	who insisted on intelligent handling of gaps in subgrids
+	and contributed illustrations;
+<!-- add this in once we spec it
+	to Eric Meyer,
+	who asked us to define useful behavior for <<flex>> min track sizes;
+-->
+	and Rachel Andrew and Jen Simmons
+	who helped bridge the feedback gap between the CSS Working Group
+	and the Web design/authoring community.
+
+	Lastly,
+	the acknowledgements section of CSS Grid Level 2
+	would be incomplete without acknowledgement
+	of everyone who made the monumental task of
+	<a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Level 1</a> possible.