Grid 栅格

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

源码

ATRI

科幻

サクラノ詩

剧情

天文台的午后

日常

银河另一端

科幻

书页之间

校园

静谧的信号

治愈

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

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

export default function Demo() {
  return (
    <Grid cols={3} 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>
      ))}
    </Grid>
  )
}

tsx

用法

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

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

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

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

tsx

示例

列数

cols 2

cols 3

cols 4

cols 6

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

const counts = [2, 3, 4, 6] as const

export default function Demo() {
  return (
    <Stack className="w-full max-w-md">
      {counts.map(cols => (
        <Stack key={cols} gap="xs">
          <Text tone="muted" size="sm">
            cols {cols}
          </Text>
          <Grid cols={cols} gap="sm">
            {Array.from({ length: cols }, (_, i) => i + 1).map(i => (
              <Card
                key={i}
                className="bg-inset grid h-10 place-items-center text-sm"
                padded={false}
              >
                {i}
              </Card>
            ))}
          </Grid>
        </Stack>
      ))}
    </Stack>
  )
}

tsx

间距

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

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

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

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

export default function Demo() {
  return (
    <Stack className="w-full max-w-md">
      <Stack gap="xs">
        <Text tone="muted" size="sm">
          md 档：列间 12 像素，行间 16 像素
        </Text>
        <Grid cols={3} gap="md">
          {[1, 2, 3, 4, 5, 6].map(i => (
            <Card key={i} className="bg-inset h-10" padded={false} />
          ))}
        </Grid>
      </Stack>
      <Stack gap="xs">
        <Text tone="muted" size="sm">
          其余档位两轴相同，这里是 lg 的 24 像素
        </Text>
        <Grid cols={3} gap="lg">
          {[1, 2, 3, 4, 5, 6].map(i => (
            <Card key={i} className="bg-inset h-10" padded={false} />
          ))}
        </Grid>
      </Stack>
    </Stack>
  )
}

tsx

跨列

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

col-span-2

col-span-3

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

export default function Demo() {
  return (
    <Grid cols={3} className="w-full max-w-md">
      <Card className="bg-inset col-span-2 grid h-16 place-items-center text-sm" padded={false}>
        col-span-2
      </Card>
      <Card className="bg-inset grid h-16 place-items-center text-sm" padded={false}>
        1
      </Card>
      <Card className="bg-inset col-span-3 grid h-16 place-items-center text-sm" padded={false}>
        col-span-3
      </Card>
    </Grid>
  )
}

tsx

随断点变化

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

窄屏两列，宽屏四列

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

export default function Demo() {
  return (
    <Stack gap="sm" className="w-full max-w-2xl">
      <Text tone="muted" size="sm">
        窄屏两列，宽屏四列
      </Text>
      <Grid cols={2} className="sm:grid-cols-4">
        {[1, 2, 3, 4, 5, 6, 7, 8].map(i => (
          <Card key={i} className="bg-inset h-12" padded={false} />
        ))}
      </Grid>
    </Stack>
  )
}

tsx

API

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

属性	说明
`children`	子元素