[css-grid-3] Update CSS-Grid-3 spec to use new grid-lanes syntax

w3c#12022 resolved to declaring masonry using
display: grid-lanes. We need to update the spec to match.

Author: stwrt

css-grid-3/Overview.bs

@@ -297,7 +297,7 @@ Reordering and Accessibility</h3>
 			</section>
 			<style>
 			.masonry {
-				//FIXME display: something;
+				display: grid-lanes;
 				grid-template-columns: repeat(5, auto);
 			}
 			.item { height: 50px; }
@@ -348,28 +348,25 @@ Reordering and Accessibility</h3>
 <h3 id="masonry-switch">
 Establishing Masonry Layout</h3>
 
-	<div class="informative">
-		<pre class="propdef partial">
-		Name: display
-		New values: something
-		</pre>
-	</div>
+	<pre class="propdef partial">
+	Name: display
+	New values: grid-lanes | inline-grid-lanes
+	</pre>
 
 	<dl dfn-for="display" dfn-type=value>
-		<dt><dfn>something</dfn>
+		<dt><dfn>grid-lanes</dfn>
+		<dd>
+			This value causes an element to generate a [=block-level=] [=masonry container=] box.
+
+		<dt><dfn>inline-grid-lanes</dfn>
 		<dd>
-			This value causes an element to generate a <a>masonry container</a> box.
+			This value causes an element to generate an [=inline-level=] [=masonry container=] box.
 	</dl>
 
 	A [=masonry container=] that is not [=subgridded=] in its [=grid axis=] establishes
 	an [=independent formatting context=]
 	for its contents.
 
-	<div class=issue>
-	ISSUE(12022): We are looking for a reasonable 'display' value (that includes the word ''display/grid'' somehow) to represent [=masonry layout=].
-	They could be of the form <css>something-grid</css>, <css>grid-something</css>, <css>grid something</css>, or <css>something grid</css>.
-	Suggestions are welcome in the issue.
-	</div>
 
 	<div class=issue>
 	ISSUE(12820): Write up how grid/masonry formatting contexts work more formally?
@@ -497,11 +494,9 @@ Subgrids</h3>
 	the subgridded axis is taken from the parent container
 	[[css-grid-2#subgrids|as specified for grid containers]];
 	if the parent's corresponding axis is a [=stacking axis=],
-	the subgridded axis acts like ''masonry''.
+	the subgridded axis also acts as a [=stacking axis=].
 
-	Note: If this results in ''grid-template/masonry'' in both axes,
-	it is resolved as normal for [=masonry containers=] with double-axis ''grid-template/masonry'' templates,
-	i.e. it acts like ''grid-template-columns: none; grid-template-rows: masonry''.
+	ISSUE: What if this conflicts with the masonry orientation, or results in both axes stacking?
 
 	In [=masonry layout=], auto-placed [=subgrids=]
 	don't inherit any line names from their parent grid,
@@ -515,7 +510,7 @@ Subgrids</h3>
 		```css
 		<style>
 		.grid {
-		  //FIXME: display: inline something;
+		  display: inline-grid-lanes;
 		  grid-template-rows: auto auto 100px;
 		  align-content: center;
 		  height: 300px;
@@ -956,7 +951,7 @@ Placement and Writing Modes</h4>
 		```css
 		<style>
 			.grid {
-			  //FIXME display: inline something;
+			  display: inline-grid-lanes;
 			  direction: rtl;
 			  grid-template-columns: repeat(4, 2ch);
 			  border: 1px solid;
@@ -991,7 +986,7 @@ Placement and Writing Modes</h4>
 		```css
 			<style>
 			.grid {
-			  //FIXME display: inline something;
+			  display: inline-grid-lanes;
 			  direction: rtl;
 			  width: 10ch;
 			  column-gap: 1ch;
@@ -1036,7 +1031,7 @@ Sizing Grid Containers</h2>
 		```css
 			<style>
 			.grid {
-			  //FIXME display: inline something;
+			  display: inline-grid-lanes;
 			  grid-template-columns: 50px 100px auto;
 			  grid-gap: 10px;
 			  border: 1px solid;
@@ -1207,7 +1202,7 @@ Graceful Degradation</h2>
 
 		```css
 		  display: grid;
-		  display: something; /* ignored in UAs that don't support masonry layout */
+		  display: grid-lanes; /* ignored in UAs that don't support masonry layout */
 		  grid-template-columns: 150px 100px 50px;
 		```
 

css-grid-3/examples/fragmentation-block-axis-example.html

@@ -10,8 +10,8 @@
 }
 
 .grid {
-  display: grid;
-  grid: masonry / 100px auto 100px;
+  display: grid-lanes;
+  grid-template-columns: 100px auto 100px;
   border: 1px solid;
   gap: 10px;
 }

css-grid-3/examples/fragmentation-inline-axis-example.html

@@ -10,8 +10,8 @@
 }
 
 .grid {
-  display: grid;
-  grid: 20px auto 30px / masonry;
+  display: grid-lanes;
+  grid-template-rows: 20px auto 30px;
   border: 1px solid;
   gap: 10px;
 }

css-grid-3/examples/graceful-degradation-example.html

@@ -5,8 +5,7 @@
 -->
 <style>
 .grid {
-  display: inline-grid;
-  grid-template-rows: masonry;
+  display: inline-grid-lanes;
   grid-template-columns: 150px 100px 50px;
   gap: 3px;
   padding: 10px;

css-grid-3/examples/grid-intrinsic-sizing-example-1.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <style>
 .grid {
-  display: inline-grid;
-  grid: masonry / 50px 100px auto;
+  display: inline-grid-lanes;
+  grid-template-columns: 50px 100px auto;
   grid-gap: 10px;
   border: 1px solid;
 }

css-grid-3/examples/justify-tracks-example-1.html

@@ -5,8 +5,8 @@
 -->
 <style>
 .grid {
-  display: inline-grid;
-  grid: 150px 100px 50px / masonry;
+  display: inline-grid-lanes;
+  grid-template-rows: 150px 100px 50px;
   gap: 3px;
   padding: 10px;
   border: 3px solid;

css-grid-3/examples/masonry-auto-flow-next.html

@@ -11,8 +11,8 @@
 
 <style>
 .grid {
-  display: inline-grid;
-  grid: masonry / repeat(3, 2ch);
+  display: inline-grid-lanes;
+  grid-template-columns: repeat(3, 2ch);
   border: 1px solid;
   masonry-auto-flow: next;
 }

css-grid-3/examples/masonry-axis-baseline-alignment-1.html

@@ -9,8 +9,8 @@
 }
 
 .grid {
-  display: inline-grid;
-  grid: masonry / repeat(10,auto);
+  display: inline-grid-lanes;
+  grid-template-columns: repeat(10,auto);
   gap: 3px 1px;
   border: 2px solid;
   height: 400px;

css-grid-3/examples/pinterest-with-span.html

@@ -11,8 +11,8 @@
 
 <style>
 .grid {
-  display: inline-grid;
-  grid: masonry / repeat(3, 200px);
+  display: inline-grid-lanes;
+  grid-template-columns: repeat(3, 200px);
   background: black;
 }
 

css-grid-3/examples/rtl-grid-axis.html

@@ -11,9 +11,9 @@
 
 <style>
 .grid {
-  display: inline-grid;
+  display: inline-grid-lanes;
   direction: rtl;
-  grid: masonry / repeat(4, 2ch);
+  grid-template-columns: repeat(4, 2ch);
   border: 1px solid;
 }