> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/grid.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Grid 栅格

根据屏幕宽度排列内容。

## 基本用法


设计

开发

发布

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/grid/basic.tsx"
import { Card, Grid } from '@ifhover/leaf-ui';

export function GridBasic() {
  return (
    <Grid columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
      {['设计', '开发', '发布'].map((label) => (
        <Card key={label}>{label}</Card>
      ))}
    </Grid>
  );
}
```

展开代码

## 更多用法


8 / 24

16 / 24

自适应宽度

窄屏隐藏

advanced.tsx

复制代码

```tsx lineNumbers file="../../src/examples/grid/advanced.tsx"
import { Card, Col, Row, Space } from '@ifhover/leaf-ui';

export function GridColumns() {
  return (
    <Space direction="vertical" align="stretch">
      <Row gutter={12}>
        <Col span={8}>
          <Card>8 / 24</Card>
        </Col>
        <Col span={16}>
          <Card>16 / 24</Card>
        </Col>
      </Row>
      <Row gutter={12}>
        <Col xs={24} md={12}>
          <Card>自适应宽度</Card>
        </Col>
        <Col xs={0} md={12}>
          <Card>窄屏隐藏</Card>
        </Col>
      </Row>
    </Space>
  );
}
```

展开代码

## 使用说明

Grid 使用 columns 设置等宽列；Row / Col 使用 24 栅格跨度与 offset。响应式配置按浏览器宽度生效，较大断点继承较小断点的设置。

## 类型

组装数据、定义回调和使用 ref 时，可以导入这些类型。

```ts
import type { ColProps, GridProps, RowProps } from '@ifhover/leaf-ui';
```

## ColProps API

| 属性       | 类型       | 默认值  | 说明               |
| -------- | -------- | ---- | ---------------- |
| `span`   | `number` | `24` | 跨列数，Col 的 0 表示隐藏 |
| `offset` | `number` | `0`  | 前方空出的列数          |
| `xs`     | `number` | —    | 小屏配置             |
| `sm`     | `number` | —    | ≥ 576px 配置       |
| `md`     | `number` | —    | ≥ 768px 配置       |
| `lg`     | `number` | —    | ≥ 992px 配置       |
| `xl`     | `number` | —    | ≥ 1200px 配置      |

## GridProps API

| 属性        | 类型                                                                        | 默认值         | 说明               |
| --------- | ------------------------------------------------------------------------- | ----------- | ---------------- |
| `columns` | `number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>` | `3`         | 列数；较大断点继承较小断点    |
| `gap`     | `number \| string \| readonly [number \| string, number \| string]`       | `16`        | 间距；数组为 \[纵向, 横向] |
| `align`   | `'start' \| 'center' \| 'end' \| 'stretch'`                               | `'stretch'` | 对齐方式             |

## RowProps API

| 属性       | 类型                                          | 默认值         | 说明                 |
| -------- | ------------------------------------------- | ----------- | ------------------ |
| `align`  | `'start' \| 'center' \| 'end' \| 'stretch'` | `'stretch'` | 对齐方式               |
| `gutter` | [`GridProps['gap']`](#gridprops-api)        | `16`        | 栅格间距；数组为 \[纵向, 横向] |