# Grid 栅格

24 栅格系统。

## 设计理念

100%
25%
25%
25%
25%
33.33%
33.33%
33.33%
50%
50%
66.66%
33.33%

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

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

## 概述

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

- 通过`row`在水平方向建立一组`column`（简写col）

- 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素

- 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建

- 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列

## Flex 布局

我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。

Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。

从堆叠到水平排列。

使用单一的一组 `nz-row` 和 `nz-col` 栅格组件，就可以创建一个基本的栅格系统，所有列（nz-col）必须放在 `nz-row` 内。

栅格常常需要和间隔进行配合，你可以使用 `nz-row` 的 `nzGutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。

列偏移

使用 `nzOffset` 可以将列向右侧偏。例如，`[nzOffset]="'4'"` 将元素向右侧偏移了 4 个列（column）的宽度。

列排序

使用 `nzPull` 和 `nzPush` 类就可以很容易的改变列（column）的顺序。

Flex布局基础

使用 `[nzType]="'flex'"` 定义 `flex` 布局，其子元素根据 `[nzJustify]` 不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。

Flex 子元素垂直对齐。

通过 Flex 布局的 Order 来改变元素的排序。

参照 Bootstrap 的 响应式设计 ，预设四个响应尺寸：`xs` `sm` `md` `lg` `xl`。

`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `nzXs` `nzSm` `nzMd` `nzLg` `nzXl` 属性中来使用。

其中 `[nzXs]="6"` 相当于 `nzXs={{'{'}}{{'{'}} span: 6 {{'}'}}{{'}'}}`

可以简单配置几种等分栅格和间距。

## API

### [nz-row]

成员 | 说明 | 类型 | 默认值
--- | --- | --- | ---
nzGutter | 栅格间隔 | Number | 0
nzType | 布局模式，可选 `flex`，现代浏览器下有效 | String |
nzAlign | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | String | `top`
nzJustify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | String | `start`

### [nz-col]

成员 | 说明 | 类型 | 默认值
--- | --- | --- | ---
nzSpan | 栅格占位格数，为 0 时相当于 `display: none` | Number | -
nzOrder | 栅格顺序，`flex` 布局模式下有效 | Number | 0
nzOffset | 栅格左侧的间隔格数，间隔内不可以有栅格 | Number | 0
nzPush | 栅格向右移动格数 | Number | 0
nzPull | 栅格向左移动格数 | Number | 0
nzXs | `<768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | Number|Object | -
nzSm | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | Number|Object | -
nzMd | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | Number|Object | -
nzLg | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | Number|Object | -
nzXl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | Number|Object | -