masonry -> grid-lanes

captainbrosset · captainbrosset · commit 189367efcb91 · 2025-11-24T14:43:58.000+01:00
diff --git a/css-masonry/blog.html b/css-masonry/blog.html
@@ -49,12 +49,12 @@
       margin-inline: auto;
       padding-inline: var(--margin);
 
-      display: masonry;
-      grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+      display: grid-lanes;
+      grid-lanes: repeat(auto-fill, minmax(15rem, 1fr));
       gap: 2rem;
     }
 
-    @supports not (display: masonry) {
+    @supports not (display: grid-lanes) {
       main {
         display: grid;
         align-items: start;
diff --git a/css-masonry/cars.html b/css-masonry/cars.html
@@ -38,9 +38,9 @@
     }
 
     .road {
-      display: masonry;
+      display: grid-lanes;
       item-tolerance: 0;
-      grid-template-columns: repeat(5, 50px);
+      grid-lanes: repeat(5, 50px);
       gap: var(--traffic-density) 20px;
       width: 341px;
       height: 100%;
diff --git a/css-masonry/kanban.html b/css-masonry/kanban.html
@@ -15,14 +15,14 @@
     .kanban-board {
       padding: 2rem;
       background: #eee;
-      display: masonry;
-      grid-template-columns: 1fr repeat(2, 1.5fr) 1fr;
+      display: grid-lanes;
+      grid-lanes: 1fr repeat(2, 1.5fr) 1fr;
       gap: 1rem 2rem;
       max-width: 1500px;
       border-radius: 1rem;
     }
 
-    @supports not (display: masonry) {
+    @supports not (display: grid-lanes) {
       .kanban-board {
         display: grid;
         grid-auto-flow: dense;
diff --git a/css-masonry/masonry-is-awesome.html b/css-masonry/masonry-is-awesome.html
@@ -16,12 +16,12 @@
       padding: 0 var(--size);
       max-width: 1200px;
 
-      display: masonry;
-      grid-template-columns: repeat(auto-fill, var(--size));
+      display: grid-lanes;
+      grid-lanes: repeat(auto-fill, var(--size));
       gap: 1rem;
     }
 
-    @supports not (display:masonry) {
+    @supports not (display:grid-lanes) {
       body {
         display: grid;
       }
diff --git a/css-masonry/nature.html b/css-masonry/nature.html
@@ -85,8 +85,8 @@
     }
 
     main {
-      display: masonry;
-      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+      display: grid-lanes;
+      grid-lanes: repeat(auto-fit, minmax(10rem, 1fr));
       gap: var(--gap);
     }
 
@@ -95,19 +95,19 @@
     }
 
     :has(input[id="layout-same-size"]:checked) main {
-      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+      grid-lanes: repeat(auto-fit, minmax(10rem, 1fr));
     }
 
     :has(input[id="layout-first-last"]:checked) main {
-      grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;
+      grid-lanes: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;
     }
 
     :has(input[id="layout-narrow-wide"]:checked) main {
-      grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
+      grid-lanes: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
     }
 
     :has(input[id="layout-fib"]:checked) main {
-      grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr;
+      grid-lanes: 1fr 1fr 2fr 3fr 5fr 8fr;
     }
 
     main .photo img {
@@ -116,7 +116,7 @@
       border-radius: .5rem;
     }
 
-    @supports not (display: masonry) {
+    @supports not (display: grid-lanes) {
       main {
         display: grid;
         align-items: stretch;
diff --git a/css-masonry/new-york.html b/css-masonry/new-york.html
@@ -20,12 +20,12 @@
     }
 
     main {
-      display: masonry;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      display: grid-lanes;
+      grid-lanes: repeat(auto-fill, minmax(200px, 1fr));
       gap: 2vw;
     }
 
-    @supports not (display:masonry) {
+    @supports not (display:grid-lanes) {
       main {
         display: grid;
       }
diff --git a/css-masonry/random.html b/css-masonry/random.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kanban board</title>
+  <style>
+    main {
+      display: grid-lanes;
+      grid-lanes: 1fr 1fr 1fr;
+      gap: 4px;
+      padding: 4px;
+      background: #999;
+    }
+
+    .item {
+      background: #eee;
+    }
+
+    .item.featured {
+      grid-column: span 2;
+    }
+  </style>
+</head>
+
+<body>
+
+  <main>
+    <div class="item" style="height:200px;"></div>
+    <div class="item featured" style="height:150px;"></div>
+    <div class="item featured" style="height:200px;"></div>
+    <div class="item" style="height:220px;"></div>
+    <div class="item featured" style="height:300px;"></div>
+    <div class="item" style="height:220px;"></div>
+    <div class="item" style="height:120px;"></div>
+    <div class="item featured" style="height:300px;"></div>
+    <div class="item" style="height:120px;"></div>
+  </main>
+
+</body>
+
+</html>
diff --git a/css-masonry/syntax-examples/auto-repeat-track-sizes.html b/css-masonry/syntax-examples/auto-repeat-track-sizes.html
@@ -15,8 +15,8 @@
     main {
       max-width: 1800px;
       margin: 3rem auto;
-      display: masonry;
-      grid-template-columns: repeat(auto-fill, auto);
+      display: grid-lanes;
+      grid-lanes: repeat(auto-fill, auto);
       gap: 10px;
     }
 
diff --git a/css-masonry/syntax-examples/custom-track-sizes.html b/css-masonry/syntax-examples/custom-track-sizes.html
@@ -15,8 +15,8 @@
     main {
       max-width: 1800px;
       margin: 3rem auto;
-      display: masonry;
-      masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
+      display: grid-lanes;
+      grid-lanes: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
       gap: 10px;
     }
 
diff --git a/css-masonry/syntax-examples/item-tolerance.html b/css-masonry/syntax-examples/item-tolerance.html
@@ -15,8 +15,8 @@
     main {
       max-width: 1800px;
       margin: 3rem auto;
-      display: masonry;
-      masonry: 200px 200px;
+      display: grid-lanes;
+      grid-lanes: 200px 200px;
       gap: 10px;
       item-tolerance: 0;
       counter-set: photo-counter 1;
diff --git a/css-masonry/syntax-examples/masonry-shorthand.html b/css-masonry/syntax-examples/masonry-shorthand.html
@@ -19,8 +19,8 @@
 
     main {
       height: 100%;
-      display: masonry;
-      masonry: "a a b" 50px 100px 200px row;
+      display: grid-lanes;
+      grid-lanes: "a a b" 50px 100px 200px row;
       gap: 10px;
     }
 
diff --git a/css-masonry/syntax-examples/same-size-columns.html b/css-masonry/syntax-examples/same-size-columns.html
@@ -15,8 +15,8 @@
     main {
       max-width: 1800px;
       margin: 3rem auto;
-      display: masonry;
-      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      display: grid-lanes;
+      grid-lanes: repeat(auto-fit, minmax(160px, 1fr));
       gap: 10px;
     }
 
diff --git a/css-masonry/syntax-examples/same-size-rows.html b/css-masonry/syntax-examples/same-size-rows.html
@@ -19,9 +19,8 @@
 
     main {
       height: 100%;
-      display: masonry;
-      masonry-direction: row;
-      grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
+      display: grid-lanes;
+      grid-lanes: repeat(auto-fit, minmax(160px, 1fr)) row;
       gap: 10px;
     }
 
diff --git a/css-masonry/syntax-examples/span-multiple-tracks.html b/css-masonry/syntax-examples/span-multiple-tracks.html
@@ -15,8 +15,8 @@
     main {
       max-width: 1800px;
       margin: 3rem auto;
-      display: masonry;
-      masonry: repeat(auto-fill, minmax(12rem, 1fr));
+      display: grid-lanes;
+      grid-lanes: repeat(auto-fill, minmax(12rem, 1fr));
       gap: 10px;
     }
 
diff --git a/css-masonry/the-daily-oddity.html b/css-masonry/the-daily-oddity.html
@@ -177,10 +177,10 @@
       flex: 1 1 100%;
     }
 
-    @supports (display: masonry) {
+    @supports (display: grid-lanes) {
       main {
-        display: masonry;
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        display: grid-lanes;
+        grid-lanes: repeat(auto-fit, minmax(180px, 1fr));
       }
 
       main article.spotlight {
diff --git a/css-masonry/toc.html b/css-masonry/toc.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<style>
+  body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    margin: 2rem;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  }
+
+  aside {
+    position: sticky;
+    top: 2rem;
+    align-self: start;
+    /* container-type: inline-size;
+    container-name: sidebar; */
+    /* flex: 1rem 1 0; */
+  }
+
+  nav ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid-lanes;
+    grid-lanes: 1fr 1fr;
+    gap: .5rem;
+    counter-reset: sections;
+  }
+
+  nav ol li {
+    aspect-ratio: 1;
+    margin: 0;
+    padding: .5rem;
+    background: #eee;
+    counter-increment: sections;
+    /* font-size: clamp(.5rem, 6cqw, 1rem); */
+  }
+
+  nav ol li::before {
+    content: counter(sections) ".";
+    display: block;
+    /* font-size: clamp(1rem, 20cqw, 5rem); */
+    font-weight: bold;
+    margin-block-end: .5rem;
+  }
+
+  nav ol li:nth-child(2) {
+    margin-block-start: 50%;
+  }
+
+  main {
+    line-height: 1.6;
+    flex: 1;
+  }
+
+  main> :first-child,
+  main> :last-child {
+    margin: 0;
+  }
+</style>
+<aside>
+  <nav>
+    <ol>
+      <li>Introduction</li>
+      <li>Getting Started</li>
+      <li>Core Concepts</li>
+      <li>Advanced Topics</li>
+      <li>API Reference</li>
+      <li>Examples</li>
+      <li>FAQ</li>
+    </ol>
+  </nav>
+</aside>
+<main>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore explicabo in voluptatibus officia aut ullam, odio
+    nihil, ut praesentium voluptates sed ipsa non! Tempora nemo vel similique harum ipsam tenetur?</p>
+  <p>Fuga ab deleniti excepturi ullam eligendi facere dignissimos soluta. Iste voluptas corrupti voluptatibus ratione
+    quisquam libero repellat quam natus doloribus illum excepturi voluptatum corporis suscipit praesentium, quos
+    explicabo, ad porro.</p>
+  <p>Assumenda error est eos sequi natus id, asperiores aliquid numquam. Cum reiciendis similique ut deleniti nesciunt
+    minima facilis accusamus? Quas dignissimos necessitatibus quod repudiandae nobis laborum quaerat unde sunt vel?</p>
+  <p>Ut nostrum facilis similique saepe doloribus voluptatibus quia at dolorum numquam. Vero nesciunt cumque excepturi
+    dolores. Cupiditate, ipsam consectetur laudantium non ipsum architecto ea earum deleniti repudiandae magnam
+    veritatis impedit!</p>
+  <p>Aliquid at, quasi veritatis eius repellat amet, adipisci ex placeat tenetur atque recusandae non laborum cupiditate
+    libero ducimus possimus? At iusto facere, voluptates quasi nisi quod qui quae perspiciatis eius.</p>
+  <p>Quisquam, libero! Cupiditate nisi, quae obcaecati corporis veritatis, molestias harum sunt laborum animi laboriosam
+    facilis sequi mollitia sed ea assumenda iste enim ex expedita eaque aperiam in asperiores reiciendis voluptas.</p>
+  <p>Illo natus, atque ex praesentium laborum adipisci soluta voluptatem blanditiis unde iste. Rem aut maxime
+    repellendus id architecto alias, accusamus sequi illo nemo voluptates nam, recusandae in eaque perspiciatis atque.
+  </p>
+  <p>Accusamus repudiandae modi doloremque! Excepturi deserunt ducimus accusantium molestias ullam voluptates, illum
+    sequi quos qui, iste iure omnis facilis atque voluptatem nisi vel. Officia inventore maxime asperiores a repellendus
+    fuga.</p>
+  <p>Ratione id illo alias nam minima eius totam veniam eveniet, fuga sit beatae. Corrupti quia ad maxime in quibusdam
+    pariatur nisi. Pariatur dignissimos quibusdam adipisci nesciunt quidem magni sequi. Qui!</p>
+  <p>Quis nulla asperiores explicabo minus praesentium fuga voluptatibus modi quasi soluta itaque deserunt iusto,
+    cupiditate magni aperiam culpa a porro tempora saepe qui. Non dolorem ipsam voluptas excepturi quos accusamus.</p>
+  <p>Nulla deserunt dolorum iure aperiam asperiores quisquam iusto magni optio ipsum! Consequuntur blanditiis tenetur
+    odit provident cum, maiores vel eius doloribus unde beatae ab eligendi laboriosam nobis ullam? Accusamus,
+    consequatur.</p>
+  <p>Beatae eos, accusamus ipsa in sint debitis maxime provident reiciendis iure id perspiciatis quo magnam? Rerum, sunt
+    non nesciunt voluptatum, beatae in voluptates molestiae cupiditate quisquam repellat, quo suscipit quae.</p>
+  <p>Corrupti cupiditate praesentium optio voluptate reprehenderit eaque fugit dolores, veniam accusamus labore, tempora
+    sunt, similique delectus suscipit quod amet dolore eveniet? Quod asperiores amet excepturi aliquam quisquam quo et
+    a.</p>
+  <p>Commodi, veritatis eos quasi, adipisci nesciunt recusandae assumenda sit hic impedit officiis distinctio quibusdam?
+    Minus tenetur similique expedita, ea excepturi voluptate cumque esse reiciendis exercitationem vel unde, ipsa
+    cupiditate tempora!</p>
+  <p>Harum obcaecati repellendus alias illo saepe nesciunt rem quo maiores! Harum, non minus! Unde tempore tenetur,
+    consequatur odit iure dicta quos placeat nemo quia aperiam corrupti quis qui eligendi molestiae.</p>
+</main>

Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,12 @@`
`16`	`16`	`padding: 0 var(--size);`
`17`	`17`	`max-width: 1200px;`
`18`	`18`
`19`		`- display: masonry;`
`20`		`- grid-template-columns: repeat(auto-fill, var(--size));`
	`19`	`+ display: grid-lanes;`
	`20`	`+ grid-lanes: repeat(auto-fill, var(--size));`
`21`	`21`	`gap: 1rem;`
`22`	`22`	`}`
`23`	`23`
`24`		`- @supports not (display:masonry) {`
	`24`	`+ @supports not (display:grid-lanes) {`
`25`	`25`	`body {`
`26`	`26`	`display: grid;`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -85,8 +85,8 @@`
`85`	`85`	`}`
`86`	`86`
`87`	`87`	`main {`
`88`		`- display: masonry;`
`89`		`- grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));`
	`88`	`+ display: grid-lanes;`
	`89`	`+ grid-lanes: repeat(auto-fit, minmax(10rem, 1fr));`
`90`	`90`	`gap: var(--gap);`
`91`	`91`	`}`
`92`	`92`
`@@ -95,19 +95,19 @@`
`95`	`95`	`}`
`96`	`96`
`97`	`97`	`:has(input[id="layout-same-size"]:checked) main {`
`98`		`- grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));`
	`98`	`+ grid-lanes: repeat(auto-fit, minmax(10rem, 1fr));`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`:has(input[id="layout-first-last"]:checked) main {`
`102`		`- grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;`
	`102`	`+ grid-lanes: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;`
`103`	`103`	`}`
`104`	`104`
`105`	`105`	`:has(input[id="layout-narrow-wide"]:checked) main {`
`106`		`- grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);`
	`106`	`+ grid-lanes: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`:has(input[id="layout-fib"]:checked) main {`
`110`		`- grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr;`
	`110`	`+ grid-lanes: 1fr 1fr 2fr 3fr 5fr 8fr;`
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`main .photo img {`
`@@ -116,7 +116,7 @@`
`116`	`116`	`border-radius: .5rem;`
`117`	`117`	`}`
`118`	`118`
`119`		`- @supports not (display: masonry) {`
	`119`	`+ @supports not (display: grid-lanes) {`
`120`	`120`	`main {`
`121`	`121`	`display: grid;`
`122`	`122`	`align-items: stretch;`
Original file line number	Diff line number	Diff line change
`@@ -20,12 +20,12 @@`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`main {`
`23`		`- display: masonry;`
`24`		`- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));`
	`23`	`+ display: grid-lanes;`
	`24`	`+ grid-lanes: repeat(auto-fill, minmax(200px, 1fr));`
`25`	`25`	`gap: 2vw;`
`26`	`26`	`}`
`27`	`27`
`28`		`- @supports not (display:masonry) {`
	`28`	`+ @supports not (display:grid-lanes) {`
`29`	`29`	`main {`
`30`	`30`	`display: grid;`
`31`	`31`	`}`