[css-grid-3][masonry] Add explicit placement example

Author: fantasai

css-grid-3/Overview.bs

@@ -103,6 +103,9 @@ Introduction</h2>
 <h3 id='background'>
 Background and Motivation</h3>
 
+<h4 id='waterfall'>
+Waterfall Layout with Auto-placed Items</h4>
+
 	[=Masonry layout=], sometimes also called “waterfall layout”,
 	is a common Web design pattern where a number of items--
 	commonly images or short article summaries--
@@ -141,6 +144,49 @@ Background and Motivation</h3>
 	unless you know up-front how tall each item will be,
 	or use JavaScript for content measurement or placement.
 
+	Using a [=masonry container=] together with ''grid-area/auto''-positioned items
+	yields this type of masonry layout.
+
+<h4 id='collapse'>
+One-dimensional Grid Layout</h4>
+
+	[=Grid layout=] allows for powerful track sizing and explicit placement in two axes,
+	but sometimes a layout only needs alignment of its items in one dimension.
+
+	Using a [=masonry container=] together with explicitly-positioned items
+	allows for this type of one-dimensional grid layout.
+
+	<div class="example">
+		In this example <a href="https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2071279204">by Douglas Graham</a>,
+		the items use explicit positioning to place each item into its assigned column;
+		but there are no rows.
+		Instead, items in each column stack one after the other.
+		This layout can't be duplicated in [=grid layout=]
+		because the “spanning” relationships among the items in adjacent columns
+		is not fixed: it depends on their relative heights,
+		and whether the optional banner or advertisement items are included.
+		It also can't be duplicated in [=flex layout=]
+		because the source order of the items
+		(which is used for reading, sequential navigation, and one-column mobile phone layout)
+		goes back and forth between the two columns.
+
+		<figure>
+			<!-- https://codepen.io/TabAtkins/pen/abeoBOm -->
+			<img src="images/masonry-page-layout.png"
+			     alt="In one-column layout:
+			          the header, followed by an optional banner, the secondary navigation,
+			          the main content area, an advertisement block, and finally the footer.
+			          In two-column layout:
+			          the header spanning both columns on top,
+			          the footer spanning both columns at the bottom,
+			          in the wider left column the optional banner followed by the main content area,
+			          and in the narrow left column the secondary navigation followed by the advertisement block.">
+			<figcaption>
+				Comparison of one-column and two-column variants of a one-dimensional grid page layout.
+			</figcaption>
+		</figure>
+	</div>
+
 <h3 id="alternative-proposals">
 Alternative Syntax Proposals</h3>