# Grid

栅格布局组件，基于 Bootstrap Grid System 实现，提供 Container、Row、Col 三级结构，支持流式布局和响应式断点。

## 适用场景

- 页面或区块的多列并排布局
- 需要响应不同屏幕宽度的自适应布局
- 表单字段的多列排列

## Props

### Container Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| type | `"fluid" \| "responsive"` | `"fluid"` | 否 | 容器类型：fluid 为流式，responsive 为响应式 |

### Row Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| gutter | `number` | `0` | 否 | 栅格间距 |
| align | `"start" \| "center" \| "end"` | `-` | 否 | 垂直对齐方式 |
| justify | `"start" \| "center" \| "end" \| "space-around" \| "space-between"` | `-` | 否 | 水平对齐方式 |

### Col Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| span | `number` | `-` | 否 | 栅格占位格数（总 24 格），为 0 时相当于 display: none |
| offset | `number` | `-` | 否 | 向右偏移的栅格数 |
| xs | `number \| ColRespProps` | `-` | 否 | `<576px` 的响应栅格，`number` 或 `{span, offset}` |
| sm | `number \| ColRespProps` | `-` | 否 | `>=576px` 的响应栅格 |
| md | `number \| ColRespProps` | `-` | 否 | `>=768px` 的响应栅格 |
| lg | `number \| ColRespProps` | `-` | 否 | `>=1080px` 的响应栅格 |
| xl | `number \| ColRespProps` | `-` | 否 | `>=1200px` 的响应栅格 |
| xxl | `number \| ColRespProps` | `-` | 否 | `>=1600px` 的响应栅格 |

## 典型用法

### 基础栅格

```tsx
import { Container, Row, Col } from '@befe/brick-comp-grid'

<Container>
    <Row>
        <Col span={24}>全宽</Col>
    </Row>
    <Row>
        <Col span={12}>左半</Col>
        <Col span={12}>右半</Col>
    </Row>
    <Row>
        <Col span={8}>三分之一</Col>
        <Col span={8}>三分之一</Col>
        <Col span={8}>三分之一</Col>
    </Row>
</Container>
```

### 带间距和对齐

```tsx
<Row gutter={16} align={'center'} justify={'space-between'}>
    <Col span={6}>A</Col>
    <Col span={6}>B</Col>
    <Col span={6}>C</Col>
</Row>
```

### 响应式栅格

```tsx
<Row>
    <Col xs={24} sm={12} md={8} lg={6}>响应式列</Col>
    <Col xs={24} sm={12} md={8} lg={6}>响应式列</Col>
</Row>
```

### 偏移

```tsx
<Row>
    <Col span={8}>左</Col>
    <Col span={8} offset={8}>右（偏移 8 格）</Col>
</Row>
```

## 注意事项

- 栅格系统总宽度为 24 格，`span` 值之和超过 24 会自动换行
- `span=0` 等同于 `display: none`，可用于动态显隐列
- 不再支持 `props.style`（2021 破坏性变更），如需样式定制请使用 `className`
- `Container` 建议有明确的宽度限制（min/max width）后使用流式栅格，避免在超宽屏幕下布局过于分散
- 响应式断点：xs < 576px，sm >= 576px，md >= 768px，lg >= 1080px，xl >= 1200px，xxl >= 1600px