Grid栅格

24 栅格系统。

设计理念

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

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

概述

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

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

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

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

  1. import { NzGridModule } from 'ng-zorro-antd/grid';

代码演示

Grid栅格 - 图1

基础栅格

从堆叠到水平排列。

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-basic',
  5.   template: `
  6.     <div nz-row>
  7.       <div nz-col nzSpan="12">col-12</div>
  8.       <div nz-col nzSpan="12">col-12</div>
  9.     </div>
  10.     <div nz-row>
  11.       <div nz-col nzSpan="8">col-8</div>
  12.       <div nz-col nzSpan="8">col-8</div>
  13.       <div nz-col nzSpan="8">col-8</div>
  14.     </div>
  15.     <div nz-row>
  16.       <div nz-col nzSpan="6">col-6</div>
  17.       <div nz-col nzSpan="6">col-6</div>
  18.       <div nz-col nzSpan="6">col-6</div>
  19.       <div nz-col nzSpan="6">col-6</div>
  20.     </div>
  21.   `
  22. })
  23. export class NzDemoGridBasicComponent {}

Grid栅格 - 图2

区块间隔

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

如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-gutter',
  5.   template: `
  6.     <nz-divider nzOrientation="left" nzText="Horizontal"></nz-divider>
  7.     <div nz-row [nzGutter]="16">
  8.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  9.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  10.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  11.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  12.     </div>
  13.     <nz-divider nzOrientation="left" nzText="Responsive"></nz-divider>
  14.     <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
  15.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  16.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  17.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  18.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  19.     </div>
  20.     <nz-divider nzOrientation="left" nzText="Vertical"></nz-divider>
  21.     <div nz-row [nzGutter]="[16, 24]">
  22.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  23.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  24.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  25.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  26.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  27.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  28.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  29.       <div nz-col class="gutter-row" [nzSpan]="6"><div class="inner-box">col-6</div></div>
  30.     </div>
  31.   `,
  32.   styles: [
  33.     `
  34.       nz-divider {
  35.         color: #333;
  36.         fontweight: normal;
  37.       }
  38.       .inner-box {
  39.         background: #0092ff;
  40.         padding: 8px 0;
  41.       }
  42.     `
  43.   ]
  44. })
  45. export class NzDemoGridGutterComponent {}

Grid栅格 - 图3

左右偏移

列偏移。

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-offset',
  5.   template: `
  6.     <div nz-row>
  7.       <div nz-col nzSpan="8">
  8.         col-8
  9.       </div>
  10.       <div nz-col nzSpan="8" nzOffset="8">
  11.         col-8
  12.       </div>
  13.     </div>
  14.     <div nz-row>
  15.       <div nz-col nzSpan="6" nzOffset="6">
  16.         col-6 col-offset-6
  17.       </div>
  18.       <div nz-col nzSpan="6" nzOffset="6">
  19.         col-6 col-offset-6
  20.       </div>
  21.     </div>
  22.     <div nz-row>
  23.       <div nz-col nzSpan="12" nzOffset="6">
  24.         col-12 col-offset-6
  25.       </div>
  26.     </div>
  27.   `
  28. })
  29. export class NzDemoGridOffsetComponent {}

Grid栅格 - 图4

栅格排序

列排序。

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-sort',
  5.   template: `
  6.     <div nz-row>
  7.       <div nz-col [nzSpan]="18" [nzPush]="6">
  8.         col-18 col-push-6
  9.       </div>
  10.       <div nz-col [nzSpan]="6" [nzPull]="18">
  11.         col-6 col-pull-18
  12.       </div>
  13.     </div>
  14.   `
  15. })
  16. export class NzDemoGridSortComponent {}

Grid栅格 - 图5

排版

布局基础。

子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-flex',
  5.   template: `
  6.     <div>
  7.       <p>sub-element align left</p>
  8.       <div nz-row nzJustify="start">
  9.         <div nz-col nzSpan="4">col-4</div>
  10.         <div nz-col nzSpan="4">col-4</div>
  11.         <div nz-col nzSpan="4">col-4</div>
  12.         <div nz-col nzSpan="4">col-4</div>
  13.       </div>
  14.       <p>sub-element align center</p>
  15.       <div nz-row nzJustify="center">
  16.         <div nz-col nzSpan="4">col-4</div>
  17.         <div nz-col nzSpan="4">col-4</div>
  18.         <div nz-col nzSpan="4">col-4</div>
  19.         <div nz-col nzSpan="4">col-4</div>
  20.       </div>
  21.       <p>sub-element align right</p>
  22.       <div nz-row nzJustify="end">
  23.         <div nz-col nzSpan="4">col-4</div>
  24.         <div nz-col nzSpan="4">col-4</div>
  25.         <div nz-col nzSpan="4">col-4</div>
  26.         <div nz-col nzSpan="4">col-4</div>
  27.       </div>
  28.       <p>sub-element monospaced arrangement</p>
  29.       <div nz-row nzJustify="space-between">
  30.         <div nz-col nzSpan="4">col-4</div>
  31.         <div nz-col nzSpan="4">col-4</div>
  32.         <div nz-col nzSpan="4">col-4</div>
  33.         <div nz-col nzSpan="4">col-4</div>
  34.       </div>
  35.       <p>sub-element align full</p>
  36.       <div nz-row nzJustify="space-around">
  37.         <div nz-col nzSpan="4">col-4</div>
  38.         <div nz-col nzSpan="4">col-4</div>
  39.         <div nz-col nzSpan="4">col-4</div>
  40.         <div nz-col nzSpan="4">col-4</div>
  41.       </div>
  42.     </div>
  43.   `,
  44.   styles: [
  45.     `
  46.       [nz-row] {
  47.         background-color: rgba(128, 128, 128, 0.08);
  48.       }
  49.     `
  50.   ]
  51. })
  52. export class NzDemoGridFlexComponent {}

Grid栅格 - 图6

对齐

子元素垂直对齐。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-flex-align',
  5.   template: `
  6.     <div>
  7.       <p>Align Top</p>
  8.       <div nz-row nzJustify="center" nzAlign="top">
  9.         <div nz-col nzSpan="4"><p class="height-100">col-4</p></div>
  10.         <div nz-col nzSpan="4"><p class="height-50">col-4</p></div>
  11.         <div nz-col nzSpan="4"><p class="height-120">col-4</p></div>
  12.         <div nz-col nzSpan="4"><p class="height-80">col-4</p></div>
  13.       </div>
  14.       <p>Align Center</p>
  15.       <div nz-row nzJustify="space-around" nzAlign="middle">
  16.         <div nz-col nzSpan="4"><p class="height-100">col-4</p></div>
  17.         <div nz-col nzSpan="4"><p class="height-50">col-4</p></div>
  18.         <div nz-col nzSpan="4"><p class="height-120">col-4</p></div>
  19.         <div nz-col nzSpan="4"><p class="height-80">col-4</p></div>
  20.       </div>
  21.       <p>Align Bottom</p>
  22.       <div nz-row nzJustify="space-between" nzAlign="bottom">
  23.         <div nz-col nzSpan="4"><p class="height-100">col-4</p></div>
  24.         <div nz-col nzSpan="4"><p class="height-50">col-4</p></div>
  25.         <div nz-col nzSpan="4"><p class="height-120">col-4</p></div>
  26.         <div nz-col nzSpan="4"><p class="height-80">col-4</p></div>
  27.       </div>
  28.     </div>
  29.   `,
  30.   styles: [
  31.     `
  32.       [nz-row] {
  33.         background-color: rgba(128, 128, 128, 0.08);
  34.       }
  35.     `
  36.   ]
  37. })
  38. export class NzDemoGridFlexAlignComponent {}

Grid栅格 - 图7

排序

通过 nzOrder 来改变元素的排序。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-flex-order',
  5.   template: `
  6.     <div>
  7.       <div nz-row>
  8.         <div nz-col nzSpan="6" nzOrder="4">
  9.           1 col-order-4
  10.         </div>
  11.         <div nz-col nzSpan="6" nzOrder="3">
  12.           2 col-order-3
  13.         </div>
  14.         <div nz-col nzSpan="6" nzOrder="2">
  15.           3 col-order-2
  16.         </div>
  17.         <div nz-col nzSpan="6" nzOrder="1">
  18.           4 col-order-1
  19.         </div>
  20.       </div>
  21.     </div>
  22.   `,
  23.   styles: [
  24.     `
  25.       [nz-row] {
  26.         background-color: rgba(128, 128, 128, 0.08);
  27.       }
  28.     `
  29.   ]
  30. })
  31. export class NzDemoGridFlexOrderComponent {}

Grid栅格 - 图8

Flex 填充

nz-col 提供 nzFlex 属性以支持填充。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-flex-stretch',
  5.   template: `
  6.     <div>
  7.       <p>Percentage columns</p>
  8.       <div nz-row>
  9.         <div nz-col nzFlex="2">2 / 5</div>
  10.         <div nz-col nzFlex="3">3 / 5</div>
  11.       </div>
  12.       <p>Fill rest</p>
  13.       <div nz-row>
  14.         <div nz-col nzFlex="100px">100px</div>
  15.         <div nz-col nzFlex="auto">Fill Rest</div>
  16.       </div>
  17.       <p>Raw flex style</p>
  18.       <div nz-row>
  19.         <div nz-col nzFlex="1 1 200px">1 1 200px</div>
  20.         <div nz-col nzFlex="0 1 300px">0 1 300px</div>
  21.       </div>
  22.     </div>
  23.   `,
  24.   styles: [
  25.     `
  26.       [nz-row] {
  27.         background-color: rgba(128, 128, 128, 0.08);
  28.       }
  29.     `
  30.   ]
  31. })
  32. export class NzDemoGridFlexStretchComponent {}

Grid栅格 - 图9

响应式布局

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-responsive',
  5.   template: `
  6.     <div nz-row>
  7.       <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
  8.         Col
  9.       </div>
  10.       <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">
  11.         Col
  12.       </div>
  13.       <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
  14.         Col
  15.       </div>
  16.     </div>
  17.   `
  18. })
  19. export class NzDemoGridResponsiveComponent {}

Grid栅格 - 图10

其他属性的响应式

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

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-grid-responsive-more',
  5.   template: `
  6.     <div nz-row>
  7.       <div nz-col [nzXs]="{ span: 5, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
  8.         Col
  9.       </div>
  10.       <div nz-col [nzXs]="{ span: 11, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
  11.         Col
  12.       </div>
  13.       <div nz-col [nzXs]="{ span: 5, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
  14.         Col
  15.       </div>
  16.     </div>
  17.   `
  18. })
  19. export class NzDemoGridResponsiveMoreComponent {}

Grid栅格 - 图11

栅格配置器

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

  1. import { Component } from '@angular/core';
  2. import { NzMarks } from 'ng-zorro-antd/slider';
  4. @Component({
  5.   selector: 'nz-demo-grid-playground',
  6.   template: `
  7.     <div class="slider-container">
  8.       <span>Horizontal Gutter (px): </span>
  9.       <div class="slider">
  10.         <nz-slider [nzMarks]="marksHGutter" [nzStep]="null" [nzMin]="8" [nzMax]="48" [(ngModel)]="hGutter"></nz-slider>
  11.       </div>
  12.       <span>Vertical Gutter (px): </span>
  13.       <div class="slider">
  14.         <nz-slider [nzMarks]="marksVGutter" [nzStep]="null" [nzMin]="8" [nzMax]="48" [(ngModel)]="vGutter"></nz-slider>
  15.       </div>
  16.       <span>Column Count:</span>
  17.       <div class="slider">
  18.         <nz-slider
  19.           [nzMarks]="marksCount"
  20.           [nzStep]="null"
  21.           [nzMin]="2"
  22.           [nzMax]="12"
  23.           [(ngModel)]="count"
  24.           (ngModelChange)="reGenerateArray($event)"
  25.         ></nz-slider>
  26.       </div>
  27.     </div>
  29.     <div class="gutter-example">
  30.       <div nz-row [nzGutter]="[hGutter, vGutter]">
  31.         <div nz-col class="gutter-row" [nzSpan]="24 / count" *ngFor="let i of array">
  32.           <div class="grid-config">Column</div>
  33.         </div>
  34.         <div nz-col class="gutter-row" [nzSpan]="24 / count" *ngFor="let i of array">
  35.           <div class="grid-config">Column</div>
  36.         </div>
  37.       </div>
  38.     </div>
  39.   `,
  40.   styles: [
  41.     `
  42.       .slider {
  43.         width: 50%;
  44.       }
  45.       .slider-container {
  46.         margin-bottom: 16px;
  47.       }
  48.       .grid-config {
  49.         height: 120px;
  50.         font-size: 14px;
  51.         line-height: 120px;
  52.         background: #0092ff;
  53.         border-radius: 4px;
  54.       }
  55.     `
  56.   ]
  57. })
  58. export class NzDemoGridPlaygroundComponent {
  59.   hGutter = 16;
  60.   vGutter = 16;
  61.   count = 4;
  62.   array = new Array(this.count);
  63.   marksHGutter: NzMarks = {
  64.     '8': '8',
  65.     '16': '16',
  66.     '24': '24',
  67.     '32': '32',
  68.     '40': '40',
  69.     '48': '48'
  70.   };
  71.   marksVGutter: NzMarks = {
  72.     '8': '8',
  73.     '16': '16',
  74.     '24': '24',
  75.     '32': '32',
  76.     '40': '40',
  77.     '48': '48'
  78.   };
  79.   marksCount: NzMarks = {
  80.     '2': '2',
  81.     '3': '3',
  82.     '4': '4',
  83.     '6': '6',
  84.     '8': '8',
  85.     '12': '12'
  86.   };
  87.   reGenerateArray(count: number): void {
  88.     this.array = new Array(count);
  89.   }
  90. }

API

[nz-row]directive

成员说明类型默认值
[nzAlign]垂直对齐方式‘top’ | ‘middle’ | ‘bottom’-
[nzGutter]栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]。number|object|[number, number]|[object, object]-
[nzJustify]水平排列方式‘start’ | ‘end’ | ‘center’ | ‘space-around’ | ‘space-between’-

[nz-col]directive

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

响应式栅格的断点扩展自 BootStrap 4 的规则（不包含链接里 occasionally 的部分)。