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)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:

Flex 布局

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

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

从堆叠到水平排列。

使用单一的一组 nz-rownz-col 栅格组件,就可以创建一个基本的栅格系统,所有列(nz-col)必须放在 nz-row 内。

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

列偏移

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

列排序

使用 nzPullnzPush 类就可以很容易的改变列(column)的顺序。

Flex布局基础

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

Flex 子元素垂直对齐。

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

参照 Bootstrap 的 响应式设计 ,预设四个响应尺寸:xs sm md lg xl

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

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 -
nzSm ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 Number -
nzMd ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 Number -
nzLg ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 Number -
nzXl ≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象 Number -