SimpleGrid 等宽栅格

按最小列宽自动决定列数的等宽栅格。

源码

ATRI

科幻

サクラノ詩

剧情

天文台的午后

日常

银河另一端

科幻

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

  const works = [
    { title: 'ATRI', tag: '科幻' },
    { title: 'サクラノ詩', tag: '剧情' },
    { title: '天文台的午后', tag: '日常' },
    { title: '银河另一端', tag: '科幻' },
  ]
</script>

<template>
  <SimpleGrid min="12rem" 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>
  </SimpleGrid>
</template>

vue

用法

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

min 是每一列的最小宽度，容器能放下几列就放几列，各列等宽。列数由容器宽度决定，不需要写断点。列数固定的场景用 Grid。

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

<template>
  <SimpleGrid min="8rem" class="w-full max-w-lg">
    <Card v-for="i in 6" :key="i" class="bg-inset grid h-16 place-items-center" :padded="false">
      {{ i }}
    </Card>
  </SimpleGrid>
</template>

vue

示例

最小列宽

min 接受任意 CSS 长度，默认 14rem。它越大，同样宽度的容器里列数越少。

min 6rem

min 10rem

min 16rem

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

  const mins = ['6rem', '10rem', '16rem'] as const
</script>

<template>
  <Stack class="w-full max-w-lg">
    <Stack v-for="min in mins" :key="min" gap="xs">
      <Text tone="muted" size="sm">min {{ min }}</Text>
      <SimpleGrid :min="min" gap="sm">
        <Card v-for="i in 4" :key="i" class="bg-inset h-10" :padded="false" />
      </SimpleGrid>
    </Stack>
  </Stack>
</template>

vue

填满整行

默认按 auto-fill 划分轨道：容器能放下几列就划几列，子元素不够时右边留下空轨道。设置 fit 换成 auto-fit，空轨道塌陷，现有的子元素分掉整行的宽度。

默认 auto-fill：空轨道保留，两个子项各占一格

fit 为真：空轨道塌陷，两个子项分掉整行

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

<template>
  <Stack class="w-full max-w-lg">
    <Stack gap="xs">
      <Text tone="muted" size="sm">默认 auto-fill：空轨道保留，两个子项各占一格</Text>
      <SimpleGrid min="8rem" gap="sm">
        <Card v-for="i in 2" :key="i" class="bg-inset grid h-12 place-items-center" :padded="false">
          {{ i }}
        </Card>
      </SimpleGrid>
    </Stack>
    <Stack gap="xs">
      <Text tone="muted" size="sm">fit 为真：空轨道塌陷，两个子项分掉整行</Text>
      <SimpleGrid min="8rem" gap="sm" fit>
        <Card v-for="i in 2" :key="i" class="bg-inset grid h-12 place-items-center" :padded="false">
          {{ i }}
        </Card>
      </SimpleGrid>
    </Stack>
  </Stack>
</template>

vue

间距

gap 与 Grid 相同：md 档列间 12 像素、行间 16 像素，其余档位两轴相同。

API

属性	类型	默认值	说明
`min`	`string`	`'14rem'`	每一列的最小宽度
`fit`	`boolean`	`false`	空轨道是否塌陷
`gap`	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	格子之间的间距
`as`	`string`	`'div'`	渲染的标签
`class`	`string`	—	追加至容器的类名

插槽	说明
`default`	子元素