style: use subgrid

commerble · Jul 16, 2024 · 5134c01 · 5134c01
1 parent e02e705
commit 5134c01
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/scss/components/tile.scss b/scss/components/tile.scss
@@ -1,7 +1,7 @@
 .tiles {
     display: grid;
     grid-template-columns: repeat(1fr);
-    grid-auto-rows: minmax(200px, auto);
+    // grid-auto-rows: minmax(200px, auto);
     grid-gap: $unit;
     margin: 0 $unit * 2;
 }
@@ -29,10 +29,14 @@
         grid-template-columns: repeat(2, 1fr);
     }
 }
+.tile {
+    display: contents;
+}
 .tile>a {
     text-decoration: none;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: span 3;
     gap: $unit;
     padding: $unit;
     color: $color-primary;

diff --git a/stories/components/Tile/tile.article.fn.ejs b/stories/components/Tile/tile.article.fn.ejs
@@ -3,12 +3,13 @@
         columns,
         items,
     } = locals;
+    const repeat = (str, max = 10, min = 3) => [...Array(~~(Math.random() * (max - min)) + min)].map(() => str).join(' ');
 %>
 <div class="tiles tiles-x<%=columns%>">
     <% for (let i = 0; i < items; i++) { %>
         <article class="tile">
             <a href="javascript:void(0)" rel="bookmark">
-                <h1>Title of the article tile <%=i%></h1>
+                <h1><%= repeat('Title') %> <%=i%></h1>
                 <time datetime="2021-01-01">2021.01.01</time>
                 <figure class="image image-golden">
                     <img src="https://httpstat.us/404" alt="Tile Image ${i}">

diff --git a/stories/components/Tile/tile.product.fn.ejs b/stories/components/Tile/tile.product.fn.ejs
@@ -3,12 +3,13 @@
         columns,
         items,
     } = locals;
+    const repeat = (str, max = 10, min = 3) => [...Array(~~(Math.random() * (max - min)) + min)].map(() => str).join(' ');
 %>
 <div class="tiles tiles-x<%=columns%>">
     <% for (let i = 0; i < items; i++) { %>
         <article class="tile">
             <a href="javascript:void(0)" rel="bookmark">
-                <h3>Product Page Name <%=i%> 商品ページ名<%=i%></h3>
+                <h3><%= repeat('Product') %> <%=i%> 商品ページ名<%=i%></h3>
                 <figure class="image image-square">
                     <img src="https://httpstat.us/404" alt="Tile Image <%=i%>">
                 </figure>