[css-grid-2] Define handling of partially-overlapped named grid areas per #4411

Author: fantasai

css-grid-2/Overview.bs

@@ -201,18 +201,78 @@ Characteristics of a Subgrid Item</h3>
 		<li id="subgrid-line-name-inheritance">
 			Since <a>subgrids</a> can be placed before their contents are placed,
 			the subgridded lines
-			automatically receive the line names
+			automatically receive the explicit line names
 			specified on the corresponding lines of the parent <a>grid</a>.
-			This includes any <a lt="implicit named lines">implicit names</a>
-			added by the 'grid-template-areas' property of the parent grid
-			(but does not include the infinite unspecified names
-			assumed on its <a>implicit grid lines</a>
-			to resolve placement against named lines
-			that don't exist in the <a>explicit grid</a>).
 
 			These names are in <em>addition</em> to
 			any line names specified locally on the subgrid.
 
+		<li id="subgrid-area-inheritance">
+			When a <a>subgrid</a> overlaps a <a>named grid area</a> in its parent
+			that was created by a 'grid-template-areas' property declaration,
+			<a>implicit line names</a> are assigned
+			to represent the parent’s <a>named grid area</a>
+			within the <a>subgrid</a>.
+
+			Note: If a <a>named grid area</a>
+			only partially overlaps the <a>subgrid</a>,
+			its <a lt="implicit named lines">implicit names</a>
+			will be assigned
+			to the first and/or last line of the <a>subgrid</a>
+			such that a <a>named grid area</a> exists
+			representing that partially overlapped area of the <a>subgrid</a>;
+			thus the <a>implicit named lines</a> of the <a>subgrid</a>
+			might not always correspond exactly
+			to the <a>implicit named lines</a> of the parent <a>grid</a>.
+
+			These names are also in <em>addition</em> to
+			any line names specified locally on the subgrid.
+
+			<div class="example">
+				In the following example,
+				the 4-column grand-parent grid has both explicit line names
+				and implicit ones generated by 'grid-template-areas':
+
+				<xmp>
+					<style type="css">
+					  .outer {
+					    display: grid;
+					    grid-template-columns:
+					      [outer-edge] 20px [main-start] 1fr [center] 1fr max-content [main-end];
+					    grid-template-areas:
+					      "gutter info info photos";
+					  }
+					  .middle {
+					    grid-column: main-start / main-end;
+					    display: grid;
+					    grid: subgrid;
+					  }
+					  .inner {
+					    grid-column: center / -1;
+					    display: grid;
+					    grid: subgrid;
+					  }
+					</style>
+
+					<div class="outer">
+					  <div class="middle">
+					    <div class="inner">&hellip;</div>
+					  </div>
+					</div>
+				</xmp>
+
+				After all types of name resolution,
+				the names for each grid will be:
+				<pre>
+					.outer = [outer-edge gutter-start] [gutter-end info-start main-start] [center] [info-end photos-start] [main-end photos-end]
+					.middle = [info-start main-start] [center] [info-end photos-start] [main-end photos-end]
+					.inner = [center info-start] [info-end photos-start] [main-end photos-end]
+				</pre>
+
+				Notice that all the explicit names inherit straight through to .inner,
+				but the implicit names are calculated based on
+				each subgrid's overlap of the original <a>named area</a>.
+			</div>
 
 		<li id="subgrid-implicit">
 			The <a>subgrid</a> does not have any <a>implicit grid tracks</a>
@@ -755,6 +815,7 @@ Changes</h2>
 	CSS Grid Layout Level 2 Working Draft</a></h3>
 
 	<ul>
+		<li>Adjusted the interaction of [=implicit named lines=] to be smarter about partially-overlapped areas. (<a href="https://github.com/w3c/csswg-drafts/issues/4411">Issue 4411</a>)
 		<li>Defined [=resolved value=] of 'grid-template-rows' and 'grid-template-columns' for [=subgrids=].
 		<li>Removed the aspect-ratio-controlled gutters feature (which will be moved to CSS Box Alignment Level 4 instead).
 	</ul>