栅格 Grid

24 栅格系统，帮助开发者快速创建响应式布局。

设计理念

在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。

划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版布局，以保证整体设计的一致性。

示例

基础栅格

从堆叠到水平排列。使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统。所有 Col 必须放在 Row 内。

区块间隔

栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性来指定每一栏之间的间隔，推荐使用 (16+8n)px 作为栅格间隔（n 是自然数）。

左右偏移

使用 offset 可以将列向右侧偏移。

栅格排序

通过使用 push 和 pull 类就可以很容易的改变列的顺序。

水平排列

通过 Row 的 justify 属性可以设置列在水平方向上的对齐方式。

垂直对齐

通过 Row 的 align 属性可以设置列在垂直方向上的对齐方式。

Flex 布局

通过 Col 的 flex 属性可以设置弹性布局。

响应式布局

预设六个响应尺寸：xs、sm、md、lg、xl、xxl。

API

Row

参数	说明	类型	默认值
gutter	栅格间隔，可以是数字或数组 [水平间距, 垂直间距]	number | [number, number] | { xs?: Gutter; sm?: Gutter; md?: Gutter; lg?: Gutter; xl?: Gutter; xxl?: Gutter }	0
justify	水平排列方式	'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'	'start'
align	垂直对齐方式	'top' | 'middle' | 'bottom' | 'stretch'	'top'
wrap	是否自动换行	boolean	true
children	子元素	ReactNode	-

Col

参数	说明	类型	默认值
span	栅格占位格数，为 0 时相当于 display: none	number | string	-
offset	栅格左侧的间隔格数	number	0
order	栅格顺序	number	0
push	栅格向右移动格数	number	0
pull	栅格向左移动格数	number	0
flex	flex 布局属性	string | number	-
xs	<576px 响应式栅格	number | string | { span?: number | string; offset?: number; order?: number; push?: number; pull?: number }	-
sm	≥576px 响应式栅格	number | string | { span?: number | string; offset?: number; order?: number; push?: number; pull?: number }	-
md	≥768px 响应式栅格	number | string | { span?: number | string; offset?: number; order?: number; push?: number; pull?: number }	-
lg	≥992px 响应式栅格	number | string | { span?: number | string; offset?: number; order?: number; push?: number; pull?: number }	-
xl	≥1200px 响应式栅格	number | string | { span?: number | string; offset?: number; order?: number; push?: number; pull?: number }	-
xxl	≥1600px 响应式栅格	number | string | { span?: number | string; offset?: number; order?: number; push?: number; pull?: number }	-
children	子元素	ReactNode	-