From dc76fa90af673243193af3eeb9484c426c53aede Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 30 Dec 2023 09:31:05 -0800
Subject: [PATCH] style(docs): use CSS grid

---
 docs/src/components/index.svelte | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/docs/src/components/index.svelte b/docs/src/components/index.svelte
index 2d0978b..11e31f7 100644
--- a/docs/src/components/index.svelte
+++ b/docs/src/components/index.svelte
@@ -99,7 +99,7 @@
     </Row>
     <Row>
       <Column>
-        <ul>
+        <div class="grid">
           {#each pictogramNames as pictogram (pictogram)}
             {#if filteredModuleNames.includes(pictogram)}
               <ClickableTile
@@ -110,7 +110,7 @@
               </ClickableTile>
             {/if}
           {/each}
-        </ul>
+        </div>
       </Column>
     </Row>
   </Grid>
@@ -129,9 +129,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: calc(100% / 16);
-    min-width: 9.3875rem;
-    flex: 0 0 auto;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
   }
 
   :global(#select-theme) {
@@ -142,9 +141,9 @@
     color: var(--cds-text-02);
   }
 
-  ul {
-    display: flex;
-    flex-wrap: wrap;
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   }
 
   .flex {