From 5ef8eef64e1148ed0a48f3e07192962ae1a63ec0 Mon Sep 17 00:00:00 2001
From: Brandon Stewart <brandonstewart@apple.com>
Date: Thu, 19 Dec 2024 05:45:52 -0800
Subject: [PATCH] WebKit export of
 https://bugs.webkit.org/show_bug.cgi?id=84622

---
 ...ry-intrinsic-sizing-cols-001-auto-ref.html |  19 +-
 ...onry-intrinsic-sizing-cols-001-fr-ref.html |  18 +-
 ...ry-intrinsic-sizing-cols-001-mix1-ref.html |  19 +-
 ...ry-intrinsic-sizing-cols-001-mix2-ref.html |  17 +-
 ...ry-intrinsic-sizing-cols-002-auto-ref.html |  19 +-
 ...onry-intrinsic-sizing-cols-002-fr-ref.html |  18 +-
 ...ry-intrinsic-sizing-cols-002-mix1-ref.html |  19 +-
 ...ry-intrinsic-sizing-cols-002-mix2-ref.html |  17 +-
 ...ry-intrinsic-sizing-cols-003-auto-ref.html |  44 ++-
 ...onry-intrinsic-sizing-cols-003-fr-ref.html |  42 ++-
 ...ry-intrinsic-sizing-cols-003-mix1-ref.html |  44 +--
 ...ry-intrinsic-sizing-cols-003-mix2-ref.html |  38 +--
 ...ry-intrinsic-sizing-cols-004-auto-ref.html |  38 +--
 ...onry-intrinsic-sizing-cols-004-fr-ref.html |  30 +-
 ...ry-intrinsic-sizing-cols-004-mix1-ref.html |  35 +-
 ...ry-intrinsic-sizing-cols-004-mix2-ref.html |  29 +-
 ...masonry-intrinsic-sizing-cols-005-ref.html |   2 +-
 ...ry-intrinsic-sizing-rows-001-auto-ref.html |  19 +-
 ...onry-intrinsic-sizing-rows-001-fr-ref.html |  18 +-
 ...ry-intrinsic-sizing-rows-001-mix1-ref.html |  19 +-
 ...ry-intrinsic-sizing-rows-001-mix2-ref.html |  17 +-
 ...ry-intrinsic-sizing-rows-002-auto-ref.html |  19 +-
 ...onry-intrinsic-sizing-rows-002-fr-ref.html |  18 +-
 ...ry-intrinsic-sizing-rows-002-mix1-ref.html |  19 +-
 ...ry-intrinsic-sizing-rows-002-mix2-ref.html |  17 +-
 ...ry-intrinsic-sizing-rows-003-auto-ref.html | 289 +++++++++--------
 ...onry-intrinsic-sizing-rows-003-fr-ref.html |  88 ++---
 ...ry-intrinsic-sizing-rows-003-mix1-ref.html |  42 +--
 ...ry-intrinsic-sizing-rows-003-mix2-ref.html |  43 ++-
 ...ry-intrinsic-sizing-rows-004-auto-ref.html | 303 +++++++++---------
 ...onry-intrinsic-sizing-rows-004-fr-ref.html |  31 +-
 ...ry-intrinsic-sizing-rows-004-mix1-ref.html |  42 +--
 ...ry-intrinsic-sizing-rows-004-mix2-ref.html | 166 +++++-----
 .../masonry-item-placement-001-ref.html       |   4 +-
 34 files changed, 759 insertions(+), 843 deletions(-)

diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-auto-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-auto-ref.html
index 3f5ca75fa8c8a0..a738cffd12f44b 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-auto-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-auto-ref.html
@@ -46,7 +46,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area:1/2">5</item>
+  <item style="width:2ch; grid-column: 2;">5</item>
 </grid>
 
 <grid>
@@ -54,28 +54,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:4ch; grid-area:1/2/2/4">5</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 1/2/2/span 2">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:3ch; grid-area:1/2/2/4">5</item>
-  <item style="width:5ch; grid-area:2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-fr-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-fr-ref.html
index e4bf5b7f7acd98..d0af62d37cd4b3 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-fr-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-fr-ref.html
@@ -46,7 +46,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2">5</item>
+  <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
 <grid>
@@ -54,27 +54,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 1/2/2/span 2">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:3ch; grid-area:1/2/2/4">5</item>
-  <item style="width:5ch; grid-area:2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix1-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix1-ref.html
index db70b7beb5dfef..8bf1f6ea2b60c4 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix1-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix1-ref.html
@@ -47,7 +47,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2">5</item>
+  <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
 <grid>
@@ -55,28 +55,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 1/2/2/span 2">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:3ch; grid-area:1/2/2/4">5</item>
-  <item style="width:5ch; grid-area:2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix2-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix2-ref.html
index e97edbd65dd561..af3a7823e476f5 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix2-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix2-ref.html
@@ -46,7 +46,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2">5</item>
+  <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
 <grid>
@@ -54,26 +54,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/span 2">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area:1/2/2/4">5</item>
-  <item style="width:5ch; grid-area:2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-auto-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-auto-ref.html
index dc883d323a718d..329ac9ad6dcef4 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-auto-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-auto-ref.html
@@ -47,7 +47,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area:1/2">5</item>
+  <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
 <grid>
@@ -55,28 +55,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:4ch; grid-area:1/2/2/4">5</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 1/2/2/span 2">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:3ch; grid-area:1/2/2/4">5</item>
-  <item style="width:5ch; grid-area:2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-fr-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-fr-ref.html
index 79c43c5994895d..986ddbfee55794 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-fr-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-fr-ref.html
@@ -47,7 +47,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2">5</item>
+  <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
 <grid>
@@ -55,27 +55,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 1/2/2/span 2">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:3ch; grid-area:1/2/2/4">5</item>
-  <item style="width:5ch; grid-area:2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix1-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix1-ref.html
index 4f3a51921f0163..c7c06960b93c8d 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix1-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix1-ref.html
@@ -47,7 +47,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2">5</item>
+  <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
 <grid>
@@ -55,28 +55,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 1/2/2/span 2">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:3ch; grid-area:1/2/2/4">5</item>
-  <item style="width:5ch; grid-area:2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix2-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix2-ref.html
index 1651af50c39914..dab4e5722803e6 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix2-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix2-ref.html
@@ -48,7 +48,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2">5</item>
+  <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
 <grid>
@@ -56,26 +56,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/span 2">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area:1/2/2/4">5</item>
-  <item style="width:5ch; grid-area:2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-auto-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-auto-ref.html
index f313703820274b..c592d9760c4935 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-auto-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-auto-ref.html
@@ -52,46 +52,38 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
-
-  <item class="hidden">0</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
-
-  <item class="hidden">0</item>
-  <item class="hidden">0 0</item>
-  <item class="hidden">0 0</item>
+  <item style="grid-column: 1; grid-row: 2;" class="hidden">0 0</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area: 1/2/2/4">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
-
-  <item class="hidden">0</item>
-  <item class="hidden">0 0</item>
-  <item class="hidden">0 0</item>
+  <item style="grid-column: 1; grid-row: 2;" class="hidden">0 0</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-fr-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-fr-ref.html
index 856a76bfb8f528..cc4110934dd45f 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-fr-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-fr-ref.html
@@ -52,44 +52,38 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
-  <item class="hidden">0</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
-  <item class="hidden">0</item>
-  <item class="hidden">0 0</item>
-  <item class="hidden">0 0</item>
+  <item style="grid-column: 1; grid-row: 2;" class="hidden">0 0</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area: 1/2/2/4">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
-
-  <item class="hidden">0</item>
-  <item class="hidden">0 0</item>
-  <item class="hidden">0 0</item>
+  <item style="grid-column: 1; grid-row: 2;" class="hidden">0 0</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix1-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix1-ref.html
index d6f5674868e3f7..65984d7b628d3e 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix1-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix1-ref.html
@@ -54,44 +54,44 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
+  <item>2 2</item>
   <item style="grid-row: span 2">3 3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
-  <item class="hidden">0</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
-  <item class="hidden">0</item>
-  <item class="hidden">0 0</item>
-  <item class="hidden">0 0</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
+
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area: 1/2/2/4">5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 
-  <item class="hidden">0</item>
-  <item class="hidden">0 0</item>
-  <item class="hidden">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix2-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix2-ref.html
index 675e45bb175e30..25f88a9b04d82c 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix2-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix2-ref.html
@@ -55,44 +55,36 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
+  <item>2 2</item>
   <item style="grid-row: span 2">3 3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
-  <item class="hidden">0</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
-  <item class="hidden">0</item>
-  <item class="hidden">0 0</item>
-  <item class="hidden">0 0</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
-
-  <item class="hidden">0</item>
-  <item class="hidden">0 0</item>
-  <item class="hidden">0 0</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-auto-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-auto-ref.html
index d01a543d06ee76..44c32aeaaa85a1 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-auto-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-auto-ref.html
@@ -60,50 +60,46 @@
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
-  <item style="grid-area: 2/1">4</item>
-  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column: 2">5 5</item>
 
   <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 2/2">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
-  <item style="grid-area: 2/2">4</item>
-  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
 
-  <item class="hidden" style="grid-area: 2/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/3">0 0</item>
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-area: 1/4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 
-  <item class="hidden" style="grid-area: 1/1">0</item>
-  <item class="hidden" style="grid-area: 2/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/3">0 0</item>
-  <item class="hidden" style="grid-area: 1/4">0 0</item>
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-area: 1/4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 1/1">0</item>
-  <item class="hidden" style="grid-area: 2/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/3">0 0</item>
-  <item class="hidden" style="grid-area: 1/4">0 0</item>
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-fr-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-fr-ref.html
index 9d757dd6228e9d..60d208a2bf9ddf 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-fr-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-fr-ref.html
@@ -41,7 +41,6 @@
   <item>3 3</item>
   <item>4</item>
   <item>5 5</item>
-  <item class="hidden" style="grid-area: 2/4/4">0 0</item>
 </grid>
 
 <grid>
@@ -58,7 +57,7 @@
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
 <grid>
@@ -66,36 +65,31 @@
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
-  <item class="hidden">0</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
 <grid>
-  <item style="grid-area: 1/4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 
-  <item class="hidden" style="grid-area: 1/1">0</item>
-  <item class="hidden" style="grid-area: 2/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/3">0 0</item>
-  <item class="hidden" style="grid-area: 1/4">0 0</item>
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-area: 1/4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 1/1">0</item>
-  <item class="hidden" style="grid-area: 2/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/3">0 0</item>
-  <item class="hidden" style="grid-area: 1/4">0 0</item>
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix1-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix1-ref.html
index 4793949c280927..c5fc8ddd40e789 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix1-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix1-ref.html
@@ -60,12 +60,13 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
-  <item style="grid-row: span 2">3 3</item>
-  <item style="grid-area: 2/1">4</item>
-  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+  <item>2 2</item>
+  <item style="grid-row: span 2;">3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-column: 1; grid-row: 2;">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
@@ -73,32 +74,34 @@
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
 
-  <item class="hidden">0</item>
+  <item class="hidden" style="grid-column: 1; grid-row: 2;">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:span 3/4">6</item>
 
-  <item class="hidden">0 0</item>
-  <item class="hidden" style="grid-area: 2/2">0 0</item>
+  <item class="hidden" style="grid-column: 1; grid-row: 2;">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:span 2/4">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 2/3">0 0</item>
+  <item class="hidden" style="grid-column: 1; grid-row: 2;">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix2-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix2-ref.html
index 640d02d1144edf..b874f70283f74f 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix2-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix2-ref.html
@@ -60,12 +60,12 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-row: span 2">2 2</item>
+  <item>2 2</item>
   <item style="grid-row: span 2">3 3</item>
-  <item style="grid-area: 2/1">4</item>
-  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
 
-  <item class="hidden" style="grid-area: 2/2">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
@@ -73,32 +73,31 @@
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
 
-  <item class="hidden" style="grid-area: 1/2">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 1/2">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-column: 4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
-  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 1/2">0 0</item>
-  <item class="hidden" style="grid-area: 3/4">0 0</item>
+  <item class="hidden" style="grid-column: 4; grid-row: 2;">0 0</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-005-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-005-ref.html
index e65661bb56958f..4e81340d48cb5a 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-005-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-cols-005-ref.html
@@ -55,11 +55,11 @@
 </grid>
 
 <grid style="grid-template-columns: 3ch 15px 15px 15px">
-  <item style="grid-column:1; grid-row: span 3;">5 5</item>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
+  <item style="grid-column:1; grid-row: span 2;">5 5</item>
   <item>6</item>
   <item>7</item>
   <item>8</item>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-auto-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-auto-ref.html
index d3bb9110be0a4b..4612a8562ffde7 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-auto-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-auto-ref.html
@@ -52,7 +52,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:2ch; grid-area: 2/1">5</item>
+  <item style="height:2ch; grid-row:2">5</item>
 </grid>
 
 <grid>
@@ -60,28 +60,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:4ch; grid-area:2/1/4/2">5</item>
+  <item style="height:4ch; grid-row:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 2/1/span 2/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-fr-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-fr-ref.html
index f4a2c2bae631e3..3b3aed96b01a2e 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-fr-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-fr-ref.html
@@ -52,7 +52,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:2ch; grid-area: 2/1">5</item>
+  <item style="height:2ch; grid-row:2">5</item>
 </grid>
 
 <grid>
@@ -60,27 +60,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:4ch; grid-area: 2/1/4/2">5</item>
+  <item style="height:4ch; grid-row:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 2/1/span 2/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix1-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix1-ref.html
index c48319319a3d1a..6858811792da13 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix1-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix1-ref.html
@@ -52,7 +52,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:2ch; grid-area: 2/1">5</item>
+  <item style="height:2ch; grid-row:2">5</item>
 </grid>
 
 <grid>
@@ -60,28 +60,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:4ch; grid-area: 2/1/4/2">5</item>
+  <item style="height:4ch; grid-row:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 2/1/span 2/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix2-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix2-ref.html
index 80e8c0531a9bec..d6007a4d8836bb 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix2-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix2-ref.html
@@ -53,7 +53,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:2ch; grid-area: 2/1">5</item>
+  <item style="height:2ch; grid-row:2">5</item>
 </grid>
 
 <grid>
@@ -61,26 +61,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:4ch; grid-area: 2/1/4/2">5</item>
+  <item style="height:4ch; grid-row:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="grid-area: 2/1/span 2/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-auto-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-auto-ref.html
index 9b30557c90b1aa..7bfa49eae1f456 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-auto-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-auto-ref.html
@@ -53,7 +53,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:2ch; grid-area:2/1">5</item>
+  <item style="height:2ch; grid-row:2">5</item>
 </grid>
 
 <grid>
@@ -61,28 +61,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:4ch; grid-area:2/1/4/2">5</item>
+  <item style="height:4ch; grid-row:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 2/1/span 2/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-fr-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-fr-ref.html
index 442280db2a01c1..2a1f1df8ec6038 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-fr-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-fr-ref.html
@@ -53,7 +53,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:2ch; grid-area: 2/1">5</item>
+  <item style="height:2ch; grid-row:2">5</item>
 </grid>
 
 <grid>
@@ -61,27 +61,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:4ch; grid-area: 2/1/4/2">5</item>
+  <item style="height:4ch; grid-row:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 2/1/span 2/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix1-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix1-ref.html
index 03efe6f7d6766d..2f5ebdc5f70d64 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix1-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix1-ref.html
@@ -53,7 +53,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:2ch; grid-area: 2/1">5</item>
+  <item style="height:2ch; grid-row:2">5</item>
 </grid>
 
 <grid>
@@ -61,28 +61,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:4ch; grid-area: 2/1/4/2">5</item>
+  <item style="height:4ch; grid-row:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="grid-area: 2/1/span 2/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix2-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix2-ref.html
index ba2034119ef4f0..5c5b8ef4126f6c 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix2-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix2-ref.html
@@ -54,7 +54,7 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:2ch; grid-area: 2/1">5</item>
+  <item style="height:2ch; grid-row:2">5</item>
 </grid>
 
 <grid>
@@ -62,26 +62,25 @@
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="visibility: hidden">4</item>
-  <item style="height:4ch; grid-column: 1; grid-row: 2 / span 2;">5</item>
+  <item style="height:4ch; grid-row:2/span 2">5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="grid-area: 2/1/span 2/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-auto-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-auto-ref.html
index 3b257ea4f7b2b0..c774c3dde7bc9c 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-auto-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-auto-ref.html
@@ -5,155 +5,154 @@
 -->
 <!-- WARNING: The interaction of writing-mode and min-content sizing seems to be a bit hazy. It's not clear if this is a correct reference. -->
 <html>
-<meta charset="utf-8">
-<title>Reference: Masonry layout min-content sizing</title>
-<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
-<style>
-
-  @import "support/masonry-intrinsic-sizing-visual.css";
-
-  grid {
-    display: inline-grid;
-    gap: 1px 2px;
-    grid-template-rows: repeat(4,auto);
-    grid-auto-flow: column;
-    border: 1px solid;
-    padding: 1px 0 2px 0;
-    vertical-align: top;
-    font-family: Ahem;
-    height: min-content;
-  }
-
-  item {
-    justify-self: start;
-    writing-mode: vertical-rl;
-    text-orientation: sideways;
-  }
-  .hidden {
-    visibility: hidden;
-    width: 0;
-  }
-
-  grid > item:nth-child(1) {
-    background-color: #89CFF0;
-  }
-
-  grid > item:nth-child(2) {
-    background-color: #FF6F61;
-  }
-
-  grid > item:nth-child(3) {
-    background-color: #FDF3E7;
-  }
-
-  grid > item:nth-child(4) {
-    background-color: #F4C542;
-  }
-
-  grid > item:nth-child(5) {
-    background-color: #333333;
-  }
-
-  grid > item:nth-child(6) {
-    background-color: #B2C8A5;
-  }
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout min-content sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+
+@import "support/masonry-intrinsic-sizing-visual.css";
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-rows: repeat(4,auto);
+  grid-auto-flow: column;
+  border: 1px solid;
+  padding: 1px 0 2px 0;
+  vertical-align: top;
+  font-family: Ahem;
+  height: min-content;
+}
+
+item {
+  justify-self: start;
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+}
+.hidden {
+  visibility: hidden;
+  width: 0;
+}
+
+grid > item:nth-child(1) {
+  background-color: #89CFF0;
+}
+
+grid > item:nth-child(2) {
+  background-color: #FF6F61;
+}
+
+grid > item:nth-child(3) {
+  background-color: #FDF3E7;
+}
+
+grid > item:nth-child(4) {
+  background-color: #F4C542;
+}
+
+grid > item:nth-child(5) {
+  background-color: #333333;
+}
+
+grid > item:nth-child(6) {
+  background-color: #B2C8A5;
+}
 </style>
 
 <body>
 
 <section>
-  <grid>
-    <item style="height:2ch">1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="grid-column: span 2">5 5</item>
-
-    <item class="hidden" style="grid-area: 4/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="height: 3ch">1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="height: 2ch">5 5</item>
-
-    <item class="hidden" style="grid-area: 4/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item style="grid-area: 1/2">4</item>
-    <item style="height:2ch; grid-area: 2/1/3/3">5 5</item>
-
-    <item class="hidden" style="grid-area: 1/2">0 0</item>
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item style="height:4ch; grid-area: 2/1/4/auto">5 5</item>
-
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-    <item class="hidden" style="grid-area: 3/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="grid-row: 4">1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item style="grid-area: 2/1/4/2">5 5</item>
-    <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-    <item class="hidden" style="grid-area: 3/3">0</item>
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-    <item class="hidden" style="grid-area: 3/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="grid-row: 4">1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-    <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-    <item class="hidden" style="grid-area: 3/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="height: 3ch">1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item style="height: 3ch">4</item>
-    <item style="grid-column: 2; grid-row: span 4;">5 5</item>
-  </grid>
-
-  <grid>
-    <item style="height: 3ch">1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item style="height: 3ch">4</item>
-    <item style="grid-column: 2; grid-row: span 4; height: 6ch">5 5</item>
-
-  </grid>
-
-  <grid>
-    <item style="height: 3ch">1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item style="height: 3ch">4</item>
-    <item style="grid-column: 2; grid-row: span 3; height: 6ch">5 5</item>
-
-  </grid>
+<grid>
+  <item style="height:2ch">1</item>
+  <item style="grid-column: span 2">2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-column: span 2">5 5</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item style="height: 3ch">1</item>
+  <item style="grid-column: span 2">2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="height: 2ch">5 5</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="height:2ch; grid-row:2">5 5</item>
+
+  <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item>
+  <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:4ch; grid-row:2/span 2">5 5</item>
+
+  <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item>
+  <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
+
+  <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item>
+  <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
+
+  <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item>
+  <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item>
+</grid>
+
+<grid>
+  <item style="height: 3ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item style="height: 3ch">4</item>
+  <item style="grid-column: 2; grid-row: span 4;">5 5</item>
+</grid>
+
+<grid>
+  <item style="height: 3ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item style="height: 3ch">4</item>
+  <item style="grid-column: 2; grid-row: span 4; height: 6ch">5 5</item>
+
+</grid>
+
+<grid>
+  <item style="height: 3ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item style="height: 3ch">4</item>
+  <item style="grid-column: 2; grid-row: span 3; height: 6ch">5 5</item>
+
+</grid>
 </section>
 </body>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-fr-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-fr-ref.html
index d498ba60d9b05e..ca2aaef482dc62 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-fr-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-fr-ref.html
@@ -83,49 +83,51 @@
   <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
-<grid>
-  <item>1</item>
-  <item style="grid-column: span 2">2 2</item>
-  <item style="grid-column: span 2">3 3</item>
-  <item style="grid-area: 1/2">4</item>
-  <item style="height:2ch; grid-area: 2/1/3/3">5 5</item>
-
-  <item class="hidden" style="grid-area: 1/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-</grid>
-
-<grid>
-  <item>1</item>
-  <item style="grid-column: span 2">2 2</item>
-  <item>3 3</item>
-  <item>4</item>
-  <item style="height:4ch; grid-area: 2/1/4/auto">5 5</item>
-
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/2">0 0</item>
-</grid>
-
-<grid>
-  <item style="grid-row: 4">1</item>
-  <item style="grid-column: span 2">2 2</item>
-  <item>3 3</item>
-  <item>4</item>
-  <item style="grid-area: 2/1/4/2">5 5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-  <item class="hidden" style="grid-area: 3/3">0</item>
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/1">0 0</item>
-</grid>
-
-<grid>
-  <item style="grid-row: 4">1</item>
-  <item>2 2</item>
-  <item>3 3</item>
-  <item>4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-</grid>
+  <grid>
+    <item>1</item>
+    <item>2 2</item>
+    <item style="grid-column: span 2">3 3</item>
+    <item>4</item>
+    <item style="height:2ch; grid-row:2">5 5</item>
+
+    <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item>
+    <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item>
+  </grid>
+
+  <grid>
+    <item>1</item>
+    <item>2 2</item>
+    <item>3 3</item>
+    <item>4</item>
+    <item style="height:4ch; grid-row:2/span 2">5 5</item>
+
+    <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item>
+    <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item>
+  </grid>
+
+  <grid>
+    <item>1</item>
+    <item>2 2</item>
+    <item>3 3</item>
+    <item>4</item>
+    <item style="grid-row:2/span 2">5 5</item>
+    <item style="height:5ch; grid-row:span 3/4">6</item>
+
+    <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item>
+    <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item>
+  </grid>
+
+  <grid>
+    <item>1</item>
+    <item>2 2</item>
+    <item>3 3</item>
+    <item>4</item>
+    <item style="height:3ch; grid-row:span 2/4">5</item>
+    <item style="height:5ch; grid-row:1/span 3">6</item>
+
+    <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item>
+    <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item>
+  </grid>
 
 <grid>
   <item>1</item>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix1-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix1-ref.html
index 92171930afc01d..04d9971b057b66 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix1-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix1-ref.html
@@ -87,48 +87,48 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-column: span 2">2 2</item>
+  <item>2 2</item>
   <item style="grid-column: span 2">3 3</item>
-  <item style="grid-area: 1/2">4</item>
-  <item style="height:2ch; grid-area: 2/1/3/3">5 5</item>
+  <item>4</item>
+  <item style="height:2ch; grid-row:2">5 5</item>
 
-  <item class="hidden" style="grid-area: 1/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item>
+  <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item>
 </grid>
 
-<grid>
+<grid style="grid-template-columns: 30px auto">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="height:4ch; grid-area: 2/1/4/auto">5 5</item>
+  <item style="height:4ch; grid-column: 2; grid-row:2/span 2">5 5</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/2">0 0</item>
+  <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item>
+  <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item>
 </grid>
 
-<grid>
-  <item style="grid-row: 4">1</item>
+<grid style="grid-template-columns: 30px auto auto">
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 2/1/4/2">5 5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/1">0 0</item>
+  <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item>
+  <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item>
 </grid>
 
-<grid>
-  <item style="grid-row: 4">1</item>
+<grid style="grid-template-columns: 30px auto auto">
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/1">0 0</item>
+  <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item>
+  <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item>
 </grid>
 
 <grid style="grid-template-columns: 30px auto">
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix2-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix2-ref.html
index ce221c46aee453..a5c92c240f4a3b 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix2-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix2-ref.html
@@ -60,47 +60,44 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-column: span 2">2 2</item>
+  <item>2 2</item>
   <item style="grid-column: span 2">3 3</item>
-  <item style="grid-area: 1/2">4</item>
-  <item style="height:2ch; grid-area: 2/1/3/3">5 5</item>
+  <item>4</item>
+  <item style="height:2ch; grid-row:2">5 5</item>
 
-  <item class="hidden" style="grid-area: 1/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
 <grid>
   <item>1</item>
-  <item style="grid-column: span 2">2 2</item>
-  <item style="grid-column: span 2">3 3</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="height:4ch; grid-area: 2/1/4/auto">5 5</item>
+  <item style="height:4ch; grid-row:2/span 2">5 5</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/2">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
-  <item style="grid-column: span 2">2 2</item>
-  <item style="grid-column: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 2/1/4/2">5 5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/1">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
-  <item style="grid-column: span 2">2 2</item>
-  <item style="grid-column: span 2">3 3</item>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
   <item>4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5 5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-auto-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-auto-ref.html
index 013bd83da7afd6..7d8d8888d90619 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-auto-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-auto-ref.html
@@ -4,162 +4,161 @@
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
-<meta charset="utf-8">
-<title>Reference: Masonry layout max-content sizing</title>
-<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
-<style>
-
-  @import "support/masonry-intrinsic-sizing-visual.css";
-
-  grid {
-    display: inline-grid;
-    gap: 1px 2px;
-    grid-template-rows: repeat(4, auto);
-    grid-auto-flow: column;
-    border: 1px solid;
-    padding: 1px 0 2px 0;
-    vertical-align: top;
-    height: max-content;
-    font-family: Ahem;
-  }
-
-  item {
-    justify-self: start;
-    writing-mode: vertical-rl;
-    text-orientation: sideways;
-  }
-
-  grid > item:nth-child(1) {
-    background-color: #89CFF0;
-  }
-
-  grid > item:nth-child(2) {
-    background-color: #FF6F61;
-  }
-
-  grid > item:nth-child(3) {
-    background-color: #FDF3E7;
-  }
-
-  grid > item:nth-child(4) {
-    background-color: #F4C542;
-  }
-
-  grid > item:nth-child(5) {
-    background-color: #333333;
-  }
-
-  grid > item:nth-child(6) {
-    background-color: #B2C8A5;
-  }
-
-  .hidden {
-    visibility: hidden;
-    opacity: 0.5;
-    width: 1em;
-  }
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout max-content sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+
+@import "support/masonry-intrinsic-sizing-visual.css";
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-rows: repeat(4, auto);
+  grid-auto-flow: column;
+  border: 1px solid;
+  padding: 1px 0 2px 0;
+  vertical-align: top;
+  height: max-content;
+  font-family: Ahem;
+}
+
+item {
+  justify-self: start;
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+}
+
+grid > item:nth-child(1) {
+  background-color: #89CFF0;
+}
+
+grid > item:nth-child(2) {
+  background-color: #FF6F61;
+}
+
+grid > item:nth-child(3) {
+  background-color: #FDF3E7;
+}
+
+grid > item:nth-child(4) {
+  background-color: #F4C542;
+}
+
+grid > item:nth-child(5) {
+  background-color: #333333;
+}
+
+grid > item:nth-child(6) {
+  background-color: #B2C8A5;
+}
+
+.hidden {
+  visibility: hidden;
+  opacity: 0.5;
+  width: 1em;
+}
 </style>
 
 <body>
 
 <section>
-  <grid>
-    <item style="height:2ch">1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item>5 5</item>
-
-    <item class="hidden" style="grid-area: 4/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="height: 3ch">1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item style="height: 3ch">4</item>
-    <item style="height:2ch">5 5</item>
-
-    <item class="hidden" style="grid-area: 4/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item style="grid-area: 1/2">4</item>
-    <item style="height:2ch; grid-area: 2/1/3/3">5 5</item>
-
-    <item class="hidden" style="grid-area: 1/2">0 0</item>
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item style="height:4ch; grid-area: 2/1/4/auto">5 5</item>
-
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-    <item class="hidden" style="grid-area: 3/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="grid-row: 4">1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item style="grid-area: 2/1/4/2">5 5</item>
-    <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-    <item class="hidden" style="grid-area: 3/3">0</item>
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-    <item class="hidden" style="grid-area: 3/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="grid-row: 4">1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-    <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-    <item class="hidden" style="grid-area: 3/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="height: 3ch">1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item style="height: 3ch">4</item>
-    <item style="grid-area: 1/2/5/3">5 5</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item style="height:6ch; grid-area: 1/2/5/3">5 5</item>
-
-    <item class="hidden" style="grid-area: 1/2">0 0</item>
-    <item class="hidden" style="grid-area: 4/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item>2 2</item>
-    <item>3 3</item>
-    <item>4</item>
-    <item style="height:6ch; grid-area: 1/2/4/3">5 5</item>
-
-    <item class="hidden" style="grid-area: 1/2">0 0</item>
-    <item class="hidden" style="grid-area: 4/2">0 0</item>
-    <item class="hidden" style="height:6ch; grid-area: 2/2/5/3">0 0</item>
-  </grid>
+<grid>
+  <item style="height:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item style="height: 3ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item style="height: 3ch">4</item>
+  <item style="height:2ch">5 5</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:2ch; grid-row:2">5 5</item>
+
+  <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item>
+  <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:4ch; grid-row:2/span 2">5 5</item>
+
+  <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item>
+  <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
+
+  <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item>
+  <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
+
+  <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item>
+  <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item>
+</grid>
+
+<grid>
+  <item style="height: 3ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item style="height: 3ch">4</item>
+  <item style="grid-area: 1/2/5/3">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:6ch; grid-area: 1/2/5/3">5 5</item>
+
+  <item class="hidden" style="grid-area: 1/2">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:6ch; grid-area: 1/2/4/3">5 5</item>
+
+  <item class="hidden" style="grid-area: 1/2">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+  <item class="hidden" style="height:6ch; grid-area: 2/2/5/3">0 0</item>
+</grid>
 </section>
 </body>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-fr-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-fr-ref.html
index 4a1cf906f8d5b5..cccb436f503976 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-fr-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-fr-ref.html
@@ -62,11 +62,8 @@
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
-  <item style="grid-area: 1/2">4</item>
-  <item style="height:2ch; grid-area: 2/1/3/3">5 5</item>
-
-  <item class="hidden" style="grid-area: 1/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item>4</item>
+  <item style="height:2ch; grid-row:2">5 5</item>
 </grid>
 
 <grid>
@@ -74,35 +71,25 @@
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="height:4ch; grid-area: 2/1/4/auto">5 5</item>
-
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/2">0 0</item>
+  <item style="height:4ch; grid-row:2/span 2">5 5</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 2/1/4/2">5 5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-  <item class="hidden" style="grid-area: 3/3">0</item>
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/1">0 0</item>
+  <item style="grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 </grid>
 
 <grid>
-  <item style="grid-row: 4">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/1">0 0</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 </grid>
 
 <grid>
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix1-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix1-ref.html
index 5682f74e230b6c..efb9969a6d40be 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix1-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix1-ref.html
@@ -86,48 +86,48 @@
 
 <grid>
   <item>1</item>
-  <item style="grid-column: span 2">2 2</item>
-  <item>3 3</item>
-  <item style="grid-area: 1/2">4</item>
-  <item style="height:2ch; grid-area: 2/1/3/3">5 5</item>
+  <item>2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="height:2ch; grid-row:2">5 5</item>
 
   <item class="hidden" style="grid-area: 1/2">0 0</item>
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
-<grid>
+<grid style="grid-template-columns: 30px auto;">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="height:4ch; grid-area: 2/1/4/auto">5 5</item>
+  <item style="height:4ch; grid-row:2/span 2">5 5</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/2">0 0</item>
+  <item class="hidden" style="grid-area: 1/2">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
-<grid>
-  <item style="grid-row: 4">1</item>
+<grid style="grid-template-columns: 30px auto;">
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="grid-area: 2/1/4/2">5 5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:span 3/4">6</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/1">0 0</item>
+  <item class="hidden" style="grid-area: 1/2">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
-<grid>
-  <item style="grid-row: 4">1</item>
+<grid style="grid-template-columns: 30px auto;">
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="height:3ch; grid-area: 2/1/4/2">5</item>
-  <item style="height:5ch; grid-area: 1/2/4/3">6</item>
+  <item style="height:3ch; grid-row:span 2/4">5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
 
-  <item class="hidden" style="grid-area: 2/1">0 0</item>
-  <item class="hidden" style="grid-area: 3/1">0 0</item>
+  <item class="hidden" style="grid-area: 1/2">0 0</item>
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
 </grid>
 
 <grid style="grid-template-columns: 30px auto;">
diff --git a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix2-ref.html b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix2-ref.html
index c1bf7d407e52db..97e6b3ea2922b8 100644
--- a/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix2-ref.html
+++ b/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix2-ref.html
@@ -39,79 +39,77 @@
 <body>
 
 <section>
-  <grid>
-    <item style="height:2ch">1</item>
-    <item>2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="grid-column: span 2">5 5</item>
-
-    <item class="hidden" style="grid-area: 4/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item>2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="height: 2ch;">5 5</item>
-
-    <item class="hidden" style="grid-area: 4/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item>3 3</item>
-    <item style="grid-area: 1/2">4</item>
-    <item style="height:2ch; grid-area: 2/1/3/3">5 5</item>
-
-    <item class="hidden" style="grid-area: 1/2">0 0</item>
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="height:4ch; grid-area: 2/1/4/auto">5 5</item>
-
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-    <item class="hidden" style="grid-area: 3/2">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="grid-row: 4">1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="grid-area: 2/1/4/2">5 5</item>
-    <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item style="grid-row: 4">1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="height:3ch; grid-area: 2/1/4/2">5 5</item>
-    <item style="height:5ch; grid-area: 1/2/4/3">6</item>
-
-    <item class="hidden" style="grid-area: 2/1">0 0</item>
-  </grid>
-
-  <grid>
-    <item>1</item>
-    <item style="grid-column: span 2">2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="grid-area: 1/3/5/4">5 5</item>
-
-    <item class="hidden" style="grid-area: 4/3">0 0</item>
-  </grid>
+<grid>
+  <item style="height:2ch">1</item>
+  <item>2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-column: span 2">5 5</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="height: 2ch;">5 5</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="height:2ch; grid-row:2">5 5</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:4ch; grid-row:2/span 2">5 5</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-row:2/span 2">5 5</item>
+  <item style="height:5ch; grid-row:1/span 3">6</item>
+
+  <item class="hidden" style="grid-area: 4/2">0 0</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="grid-column: span 2">2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 1/3/5/4">5 5</item>
+
+  <item class="hidden" style="grid-area: 4/3">0 0</item>
+</grid>
 
   <grid>
     <item>1</item>
@@ -120,18 +118,18 @@
     <item>4</item>
     <item style="height:6ch; grid-area: 1/3/5/4">5 5</item>
 
-    <item class="hidden" style="grid-area: 4/3">0 0</item>
-  </grid>
+  <item class="hidden" style="grid-area: 4/3">0 0</item>
+</grid>
 
-  <grid>
-    <item>1</item>
-    <item>2 2</item>
-    <item style="grid-column: span 2">3 3</item>
-    <item>4</item>
-    <item style="height:6ch; grid-area: 1/3/4/4">5 5</item>
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item style="grid-column: span 2">3 3</item>
+  <item>4</item>
+  <item style="height:6ch; grid-area: 1/3/4/4">5 5</item>
 
-    <item class="hidden" style="grid-area: 4/3">0 0</item>
-    <item class="hidden" style="height:6ch; grid-area: 2/3/5/4">0 0</item>
-  </grid>
+  <item class="hidden" style="grid-area: 4/3">0 0</item>
+  <item class="hidden" style="height:6ch; grid-area: 2/3/5/4">0 0</item>
+</grid>
 </section>
 </body>
diff --git a/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html b/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html
index 2e100c3be619cb..20272827189b04 100644
--- a/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html
+++ b/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html
@@ -35,11 +35,11 @@
 
 <grid>
   <item style="grid-column:1">6</item>
-  <item style="grid-column:2">5</item>
-  <item style="grid-column:span 2">4</item>
+  <item>5</item>
   <item style="margin-top:10px">3</item>
   <item style="grid-column:span 2">1</item>
   <item>2</item>
+  <item style="grid-column:3/span 2">4</item>
 </grid>
 
 </body>