SimpleGrid 等宽栅格

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

源码

ATRI

科幻

サクラノ詩

剧情

天文台的午后

日常

银河另一端

科幻

import { AspectRatio, Card, SimpleGrid, Stack, Tag, Text } from '@hina-ui/react'

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

export default function Demo() {
  return (
    <SimpleGrid min="12rem" className="w-full max-w-2xl">
      {works.map(work => (
        <Card key={work.title}>
          <Stack gap="xs" align="start">
            <AspectRatio className="bg-inset w-full rounded-md" />
            <Text className="font-medium">{work.title}</Text>
            <Tag>{work.tag}</Tag>
          </Stack>
        </Card>
      ))}
    </SimpleGrid>
  )
}

tsx

用法

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

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

import { Card, SimpleGrid } from '@hina-ui/react'

export default function Demo() {
  return (
    <SimpleGrid min="8rem" className="w-full max-w-lg">
      {[1, 2, 3, 4, 5, 6].map(i => (
        <Card key={i} className="bg-inset grid h-16 place-items-center" padded={false}>
          {i}
        </Card>
      ))}
    </SimpleGrid>
  )
}

tsx

示例

最小列宽

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

min 6rem

min 10rem

min 16rem

import { Card, SimpleGrid, Stack, Text } from '@hina-ui/react'

const mins = ['6rem', '10rem', '16rem'] as const

export default function Demo() {
  return (
    <Stack className="w-full max-w-lg">
      {mins.map(min => (
        <Stack key={min} gap="xs">
          <Text tone="muted" size="sm">
            min {min}
          </Text>
          <SimpleGrid min={min} gap="sm">
            {[1, 2, 3, 4].map(i => (
              <Card key={i} className="bg-inset h-10" padded={false} />
            ))}
          </SimpleGrid>
        </Stack>
      ))}
    </Stack>
  )
}

tsx

填满整行

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

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

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

import { Card, SimpleGrid, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-lg">
      <Stack gap="xs">
        <Text tone="muted" size="sm">
          默认 auto-fill：空轨道保留，两个子项各占一格
        </Text>
        <SimpleGrid min="8rem" gap="sm">
          {[1, 2].map(i => (
            <Card key={i} className="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>
          {[1, 2].map(i => (
            <Card key={i} className="bg-inset grid h-12 place-items-center" padded={false}>
              {i}
            </Card>
          ))}
        </SimpleGrid>
      </Stack>
    </Stack>
  )
}

tsx

间距

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

API

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

属性	说明
`children`	子元素