From bce557cc2dc767628bed6aac87301a1be7c5431b Mon Sep 17 00:00:00 2001
From: rxliuli <rxliuli@gmail.com>
Date: Tue, 4 Nov 2025 05:03:50 +0800
Subject: init commit

---
 src/components/Grid.svelte | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/Grid.svelte

(limited to 'src/components/Grid.svelte')

diff --git a/src/components/Grid.svelte b/src/components/Grid.svelte
new file mode 100644
index 0000000..df2ca74
--- /dev/null
+++ b/src/components/Grid.svelte
@@ -0,0 +1,37 @@
+<script lang="ts" generics="T">
+    import { getGridVars } from '@amp/web-app-components/src/components/Shelf/utils/getGridVars';
+    import type { GridType } from '@amp/web-app-components/src/components/Shelf/types';
+
+    export let items: T[] = [];
+    export let gridType: GridType;
+
+    $: style = getGridVars(gridType);
+</script>
+
+<ul {style} class="grid" data-test-id="grid">
+    {#each items as item}
+        <li>
+            <slot {item} />
+        </li>
+    {/each}
+</ul>
+
+<style lang="scss">
+    @mixin grid-styles-for-viewport($viewport: null) {
+        grid-template-columns: repeat(var(--grid-#{$viewport}), 1fr);
+        column-gap: var(--grid-column-gap-#{$viewport});
+        row-gap: var(--grid-row-gap-#{$viewport});
+    }
+
+    .grid {
+        display: grid;
+        width: 100%;
+        padding: 0 var(--bodyGutter);
+
+        @each $viewport in ('xsmall', 'small', 'medium', 'large', 'xlarge') {
+            @media (--range-#{$viewport}-only) {
+                @include grid-styles-for-viewport($viewport);
+            }
+        }
+    }
+</style>
-- 
cgit v1.2.3