Components
Grid
An alignment lattice: tracks of equal measure, sized by column count — or, with `minChildWidth`, as many tracks as the container fits.
#Basic usage
1
2
3
4
5
6
<script setup lang="ts">
import { Grid } from "@bysages/vue";
</script>
<template>
<!-- With minChildWidth the container counts the tracks itself: grow
and shrink the canvas and the lattice re-counts. -->
<Grid min-child-width="10rem" class="w-full">
<div
v-for="n in 6"
:key="n"
class="grid place-items-center border border-border bg-surface-3 p-3 text-sm text-secondary"
>
{{ n }}
</div>
</Grid>
</template>
1
2
3
4
5
6
<script setup lang="ts">
import { Grid } from "@bysages/vue";
</script>
<template>
<Grid :columns="3" class="w-full">
<div
v-for="n in 6"
:key="n"
class="grid place-items-center border border-border bg-surface-3 p-3 text-sm text-secondary"
>
{{ n }}
</div>
</Grid>
</template>
1
2
3
<script setup lang="ts">
import { Grid } from "@bysages/vue";
</script>
<template>
<Grid :columns="3" gap="xl" class="w-full">
<div
v-for="n in 3"
:key="n"
class="grid place-items-center border border-border bg-surface-3 p-3 text-sm text-secondary"
>
{{ n }}
</div>
</Grid>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
import { Grid } from "@bysages/vue";
</script>
<template>
<Grid :columns="12" class="w-full">
<div
v-for="n in 12"
:key="n"
class="grid place-items-center border border-border bg-surface-3 p-3 text-sm text-secondary"
>
{{ n }}
</div>
</Grid>
</template>
#Props
#Grid
| Prop | Type | Default | Description |
|---|---|---|---|
columns | Number | 12 | — |
gap | String | "md" | — |
minChildWidth | String | undefined | — |