Grid 栅格

按固定列数排布子元素的栅格容器。

源码

ATRI

科幻

サクラノ詩

剧情

天文台的午后

日常

银河另一端

科幻

书页之间

校园

静谧的信号

治愈

<script setup lang="ts">
  import { AspectRatio, Card, Grid, Stack, Tag, Text } from '@hina-ui/vue'

  const works = [
    { title: 'ATRI', tag: '科幻' },
    { title: 'サクラノ詩', tag: '剧情' },
    { title: '天文台的午后', tag: '日常' },
    { title: '银河另一端', tag: '科幻' },
    { title: '书页之间', tag: '校园' },
    { title: '静谧的信号', tag: '治愈' },
  ]
</script>

<template>
  <Grid :cols="3" class="w-full max-w-2xl">
    <Card v-for="work in works" :key="work.title">
      <Stack gap="xs" align="start">
        <AspectRatio class="bg-inset w-full rounded-md" />
        <Text class="font-medium">{{ work.title }}</Text>
        <Tag>{{ work.tag }}</Tag>
      </Stack>
    </Card>
  </Grid>
</template>

vue

用法

import { Grid } from '@hina-ui/vue'

cols 是列数，取 1 到 12。子元素按顺序填入格子，超出一行的自动换到下一行。

<script setup lang="ts">
  import { Card, Grid } from '@hina-ui/vue'
</script>

<template>
  <Grid :cols="3" class="w-full max-w-md">
    <Card v-for="i in 6" :key="i" class="bg-inset grid h-16 place-items-center" :padded="false">
      {{ i }}
    </Card>
  </Grid>
</template>

vue

示例

列数

cols 2

cols 3

cols 4

cols 6

<script setup lang="ts">
  import { Card, Grid, Stack, Text } from '@hina-ui/vue'

  const counts = [2, 3, 4, 6] as const
</script>

<template>
  <Stack class="w-full max-w-md">
    <Stack v-for="cols in counts" :key="cols" gap="xs">
      <Text tone="muted" size="sm">cols {{ cols }}</Text>
      <Grid :cols="cols" gap="sm">
        <Card
          v-for="i in cols"
          :key="i"
          class="bg-inset grid h-10 place-items-center text-sm"
          :padded="false"
        >
          {{ i }}
        </Card>
      </Grid>
    </Stack>
  </Stack>
</template>

vue

间距

gap 只接受档位。md 是默认档，两个方向取值不同：列间是 --hn-inline-gap，行间是 --hn-stack-gap，常规密度下分别是 12 与 16 像素。其余档位两轴相同，分别是 0、4、8、24 与 32 像素。

md 档：列间 12 像素，行间 16 像素

其余档位两轴相同，这里是 lg 的 24 像素

<script setup lang="ts">
  import { Card, Grid, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-md">
    <Stack gap="xs">
      <Text tone="muted" size="sm">md 档：列间 12 像素，行间 16 像素</Text>
      <Grid :cols="3" gap="md">
        <Card v-for="i in 6" :key="i" class="bg-inset h-10" :padded="false" />
      </Grid>
    </Stack>
    <Stack gap="xs">
      <Text tone="muted" size="sm">其余档位两轴相同，这里是 lg 的 24 像素</Text>
      <Grid :cols="3" gap="lg">
        <Card v-for="i in 6" :key="i" class="bg-inset h-10" :padded="false" />
      </Grid>
    </Stack>
  </Stack>
</template>

vue

跨列

子元素占据多列时，在子元素上写 Tailwind 的 col-span-*。Grid 不提供列组件。

col-span-2

col-span-3

<script setup lang="ts">
  import { Card, Grid } from '@hina-ui/vue'
</script>

<template>
  <Grid :cols="3" class="w-full max-w-md">
    <Card class="bg-inset col-span-2 grid h-16 place-items-center text-sm" :padded="false">
      col-span-2
    </Card>
    <Card class="bg-inset grid h-16 place-items-center text-sm" :padded="false">1</Card>
    <Card class="bg-inset col-span-3 grid h-16 place-items-center text-sm" :padded="false">
      col-span-3
    </Card>
  </Grid>
</template>

vue

随断点变化

列数在不同断点下不同时，用 Tailwind 的断点类覆盖，例如 sm:grid-cols-4。cols 属性本身不接受响应式对象。

窄屏两列，宽屏四列

<script setup lang="ts">
  import { Card, Grid, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="sm" class="w-full max-w-2xl">
    <Text tone="muted" size="sm">窄屏两列，宽屏四列</Text>
    <Grid :cols="2" class="sm:grid-cols-4">
      <Card v-for="i in 8" :key="i" class="bg-inset h-12" :padded="false" />
    </Grid>
  </Stack>
</template>

vue

API

属性	类型	默认值	说明
`cols`	`1` 到 `12`	`1`	列数
`gap`	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	格子之间的间距
`as`	`string`	`'div'`	渲染的标签
`class`	`string`	—	追加至容器的类名

插槽	说明
`default`	子元素