From 7e79c6694c8cd31f55422acc13909b3f03b2b436 Mon Sep 17 00:00:00 2001
From: Thomas Klepzig <tklepzig@users.noreply.github.com>
Date: Thu, 8 Jan 2026 10:04:52 +0100
Subject: [PATCH] Improve tile sample

---
 index.html | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 6180090..5bcc55b 100644
--- a/index.html
+++ b/index.html
@@ -374,13 +374,13 @@ <h3>Stacking</h3>
               The panel has a translucent background, so when stacking multiple
               panels the background changes slightly with each level.
             </p>
-            <div class="panel" style="margin: var(--spacing)">
+            <div class="panel">
               <header></header>
               <article>
-                <div class="panel" style="margin: var(--spacing)">
+                <div class="panel">
                   <header></header>
                   <article>
-                    <div class="panel" style="margin: var(--spacing)">
+                    <div class="panel">
                       <header></header>
                       <article>Content</article>
                       <footer></footer>
@@ -397,31 +397,35 @@ <h3>Stacking</h3>
         <div class="panel">
           <header><h2 id="tile">Tile</h2></header>
           <article
-            style="display: grid; grid-auto-flow: column; gap: var(--spacing)"
+            style="
+              display: grid;
+              grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+              gap: var(--spacing);
+            "
           >
             <div class="tile">
               <header></header>
-              <article>Tile</article>
+              <article>Tile Content</article>
               <footer></footer>
             </div>
             <div class="tile shade1">
               <header></header>
-              <article>Tile</article>
+              <article>Tile Content</article>
               <footer></footer>
             </div>
             <div class="tile shade2">
               <header></header>
-              <article>Tile</article>
+              <article>Tile Content</article>
               <footer></footer>
             </div>
             <div class="tile shade3">
               <header></header>
-              <article>Tile</article>
+              <article>Tile Content</article>
               <footer></footer>
             </div>
             <div class="tile warn">
               <header></header>
-              <article>Tile</article>
+              <article>Tile Content</article>
               <footer></footer>
             </div>
           </article>