---
title: Grid 栅格
nav:
  title: 组件
  path: /component
group:
  title: 基础组件
  path: /basic
  order: 4
---

# Grid 栅格

> 24 栅格系统。灵感来自 `Ant Design`

## 概述

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：

- 通过 `row` 在水平方向建立一组 `column`（简写 col）。
- 你的内容应当放置于 `col` 内，并且，只有 `col` 可以作为 `row` 的直接元素。
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建。
- 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列。

## 代码演示

<code src="./__fixtures__/basic.tsx"></code>

## API

### Row

<API hideTitle src="./row.tsx"></API>

### Col

<API hideTitle src="./col.tsx"></API>