[css-grid-2] Take II at handling subgrid mbp. w3c#2592

Author: fantasai

css-grid-2/Overview.bs

@@ -369,13 +369,16 @@ Characteristics of a Subgrid Item</h3>
 		<li id="subgrid-edge-placeholders">
 			For each edge of a non-empty subgrid,
 			to account for the subgrid’s margin/border/padding at that edge,
-			a hypothetical item is contributed to the track sizing algorithm.
-			This item’s sizes are taken from the sizes of the largest item
-			with the smallest span
-			from the occupied track closest to that edge of the subgrid,
+			a hypothetical item is contributed to the track sizing algorithm
+			for each span size
+			in the set of items spanning into
+			the occupied track closest to that edge of the subgrid.
+			This item’s sizes are taken from the sizes of the largest such item
+			of each span size,
 			and are additionally inflated by the subgrid’s own margin/border/padding
 			at that edge (or both edges,
-			if it happens to be the most extreme item on both sides).
+			if it happens to be the most extreme item on both sides
+			and is also the smallest span size).
 			Similarly, the hypothetical item’s span is taken
 			from that same real item’s span,
 			and inflated by the number of empty tracks between it
@@ -387,6 +390,34 @@ Characteristics of a Subgrid Item</h3>
 			<a href="#subgrid-item-contribution">accounted for the subgrid’s margin/border/padding</a>
 			as described above.
 
+			<div class="example">
+				For example, in the following subgrid layout:
+				<pre>
+					5px auto auto 5px
+					.   aaaaaaaaa .
+					.   bbbb cccc .
+				</pre>
+
+				Assuming subgrid items <var>a</var>, <var>b</var>, and <var>c</var>
+				occupying their corresponding grid areas
+				and a subgrid padding of 25px,
+				two hypothetical grid items would be contributed
+				to the track sizing algorithm
+				for the purpose of handling the subgrid’s inline-start padding:
+				one with the size of <var>b</var> plus 25px,
+				spanning the first two columns;
+				and one with the size of <var>a</var> plus 25px,
+				spanning the first three columns.
+
+				If only item <var>a</var> existed,
+				which would make it both
+				span into the closest occupied columns on both sides
+				and be the smallest-spanning item on each side,
+				then the hypothetical item it contributes
+				would be its size inflated by 50px
+				and would span all four columns.
+			</div>
+
 		<li id="subgrid-box-alignment">
 			The <a>subgrid</a> is always stretched in its subgridded dimension(s:
 			the 'align-self'/'justify-self' properties on it are ignored,