30 lines
661 B
Svelte
30 lines
661 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
|
|
let {
|
|
children,
|
|
density = "dense",
|
|
}: {
|
|
children?: Snippet;
|
|
density?: "compact" | "dense";
|
|
} = $props();
|
|
</script>
|
|
|
|
<section class="grid-frame" data-density={density}>
|
|
{@render children?.()}
|
|
</section>
|
|
|
|
<style>
|
|
.grid-frame {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
|
|
gap: var(--ui-space-3);
|
|
padding: var(--ui-space-3);
|
|
}
|
|
|
|
.grid-frame[data-density="compact"] {
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
|
|
gap: var(--ui-space-2);
|
|
padding: var(--ui-space-2);
|
|
}
|
|
</style>
|