[css-grid-3] Clarify self-alignment. w3c#10275

Author: tabatkins

css-grid-3/Overview.bs

@@ -1162,21 +1162,67 @@ Stacking-axis Content Distribution: the 'align-content'/'justify-content' proper
 Stacking-axis Self Alignment: the 'align-self'/'justify-self' and 'align-items'/'justify-items' properties</h3>
 
 	In the [=stacking axis=],
-	the [=self-alignment properties=] only apply to items that are adjacent to a gap in the layout,
+	the [=self-alignment properties=] only apply to items that are adjacent to a “gap” in the layout,
 	i.e. placed in their [=grid track=](s) either immediately before a spanning item
 	or as the last item.
 	The [=alignment subject=] is the item's [=margin box=],
-	and the [=alignment container=] is that box plus the adjacent gap.
+	and the [=alignment container=] is that box plus the adjacent “gap”.
+	For the last item in a track, the [=alignment container=]
+	extends to the lowest bottom outer edge
+	among all the last items in all tracks.
 
 	<figure>
-		<img src="images/align-self.png" width="724" height="302" alt="">
+		<img src="images/align-self.png" width="724" height="302"
+			alt="In a 4-column grid lanes container with 6 items,
+				where the last item spans 3 columns
+				and is pushed down by the 2nd item,
+				leaving a gap below the items in the other three columns,
+				alignment is possible for the items adjacent to this gap.
+				The alignment container stretches from the top of the item
+				to the bottom of the gap below it.
+				For the last column,
+				which the spanning item doesn't reach,
+				it stretches to the bottom of the spanning item
+				(the lowest item in the grid prior to alignment).">
 		<figcaption>
 			The three highlighted items are the only ones with "gaps" following them,
 			so they're the only ones that will respond to 'align-items'.
 			Their [=alignment containers=] are indicated by the dashed areas.
 		</figcaption>
 	</figure>
 
+	<figure>
+		<table>
+		<thead>
+			<tr>
+				<th>''align-self: start''
+				<th>''align-self: end''
+		<tbody>
+			<tr>
+				<td><img src="images/self-align-stack-start.png"
+					alt="In a 3-column grid lanes container with 5 items,
+						where the first and third items are short,
+						the third item spans two columns,
+						and the last item spands all three,
+						if the second is taller than the first,
+						and the fourth is taller than the second and third,
+						two adjacent alignment containers are created:
+						one as tall as the second item, into which the first item aligns,
+						and one as tall as the third item minus the second item,
+						into which the column-spanning fourth item aligns.">
+				<td><img src="images/self-align-stack-end.png"
+					alt="When the items are aligned to the bottom,
+						there is empty space above the fourth item.
+						But this space, even though it is adjacent to the space for the first item,
+						is not available for the first item,
+						which aligns simply to the bottom of the second item.">
+		</table>
+		<figcaption>
+			Alignment of an item does not affect the size or position
+			of other items' [=alignment containers=].
+		</figcaption>
+	</figure>
+
 	ISSUE(10275): Is this a reasonable definition for how the [=self-alignment properties=] should work in the [=stacking axis=]?
 
 <h3 id="grid-lanes-baseline-alignment" oldids="masonry-baseline-alignment">