组件
栅格 Grid
Grid：等宽轨道的对齐网格。轨道数量由列数决定；设置 `minChildWidth` 后，则按容器能放下多少轨道自动计算。
#基础用法
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>
#属性
#Grid
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
columns | Number | 12 | — |
gap | String | "md" | — |
minChildWidth | String | undefined | — |