• Grid栅格
    • 设计理念
    • 概述
    • Flex 布局
    • 单独引入此组件
    • 代码演示
    • API
      • [nz-row]directive
      • [nz-col]directive

    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 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    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.     <div class="gutter-example">
    7.       <div nz-row nzGutter="16">
    8.         <div nz-col class="gutter-row" nzSpan="6">
    9.           <div class="gutter-box">col-6</div>
    10.         </div>
    11.         <div nz-col class="gutter-row" nzSpan="6">
    12.           <div class="gutter-box">col-6</div>
    13.         </div>
    14.         <div nz-col class="gutter-row" nzSpan="6">
    15.           <div class="gutter-box">col-6</div>
    16.         </div>
    17.         <div nz-col class="gutter-row" nzSpan="6">
    18.           <div class="gutter-box">col-6</div>
    19.         </div>
    20.       </div>
    21.     </div>
    22.     <div class="gutter-example">
    23.       <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
    24.         <div nz-col class="gutter-row" nzSpan="6">
    25.           <div class="gutter-box">col-6</div>
    26.         </div>
    27.         <div nz-col class="gutter-row" nzSpan="6">
    28.           <div class="gutter-box">col-6</div>
    29.         </div>
    30.         <div nz-col class="gutter-row" nzSpan="6">
    31.           <div class="gutter-box">col-6</div>
    32.         </div>
    33.         <div nz-col class="gutter-row" nzSpan="6">
    34.           <div class="gutter-box">col-6</div>
    35.         </div>
    36.       </div>
    37.     </div>
    38.   `,
    39.   styles: [
    40.     `
    41.       .gutter-box {
    42.         background: #00a0e9;
    43.         padding: 5px 0;
    44.       }
    45.     `
    46.   ]
    47. })
    48. 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

    Flex 布局

    Flex 布局基础。

    使用 nzType 定义 flex 布局，其子元素根据不同的值 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 nzType="flex" 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 nzType="flex" 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 nzType="flex" 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 nzType="flex" 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 nzType="flex" 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. })
    45. export class NzDemoGridFlexComponent {}

    Grid栅格 - 图6

    Flex 对齐

    Flex 子元素垂直对齐。

    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 nzType="flex" 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 nzType="flex" 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 nzType="flex" 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. })
    31. export class NzDemoGridFlexAlignComponent {}

    Grid栅格 - 图7

    Flex 排序

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

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-grid-flex-order',
    5.   template: `
    6.     <div nz-row nzType="flex">
    7.       <div nz-col nzSpan="6" [nzOrder]="order" *ngFor="let order of orderList; index as i">
    8.         {{ i + 1 }} col-order-{{ order }}
    9.       </div>
    10.     </div>
    11.   `
    12. })
    13. export class NzDemoGridFlexOrderComponent implements OnInit {
    14.   orderList = [1, 2, 3, 4];
    16.   ngOnInit(): void {
    17.     setTimeout(() => {
    18.       this.orderList = [...this.orderList.reverse()];
    19.     }, 10000);
    20.   }
    21. }

    Grid栅格 - 图8

    响应式布局

    参照 Bootstrap 的 响应式设计，预设五个响应尺寸：xssmmdlgxlxxl。

    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栅格 - 图9

    其他属性的响应式

    spanpullpushoffsetorder 属性可以通过内嵌到 nzXsnzSmnzMdnzLgnzXlnzXXl 属性中来使用。

    其中 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栅格 - 图10

    栅格配置器

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-grid-playground',
    5.   template: `
    6.     <div style="margin-bottom:16px;">
    7.       <span style="margin-right: 6px;">Gutter (px): </span>
    8.       <div style="width: 50%">
    9.         <nz-slider
    10.           [nzMarks]="marksGutter"
    11.           [nzStep]="null"
    12.           [nzDefaultValue]="16"
    13.           [nzMax]="48"
    14.           [(ngModel)]="gutter"
    15.         ></nz-slider>
    16.       </div>
    17.       <span style="margin-right: 6px;">Column Count:</span>
    18.       <div style="width: 50%">
    19.         <nz-slider
    20.           [nzMarks]="marksCount"
    21.           [nzStep]="null"
    22.           [nzDefaultValue]="4"
    23.           [nzMax]="12"
    24.           [(ngModel)]="count"
    25.         ></nz-slider>
    26.       </div>
    27.     </div>
    29.     <div class="gutter-example">
    30.       <div nz-row [nzGutter]="gutter">
    31.         <div nz-col class="gutter-row" [nzSpan]="24 / count" *ngFor="let i of generateArray(count)">
    32.           <div class="grid-config">Column</div>
    33.         </div>
    34.       </div>
    35.     </div>
    36.   `,
    37.   styles: [
    38.     `
    39.       .grid-config {
    40.         background: #00a0e9;
    41.         height: 120px;
    42.         line-height: 120px;
    43.         font-size: 13px;
    44.       }
    45.     `
    46.   ]
    47. })
    48. export class NzDemoGridPlaygroundComponent {
    49.   gutter = 16;
    50.   count = 4;
    51.   marksGutter = {
    52.     8: 8,
    53.     16: 16,
    54.     24: 24,
    55.     32: 32,
    56.     40: 40,
    57.     48: 48
    58.   };
    59.   marksCount = {
    60.     2: 2,
    61.     3: 3,
    62.     4: 4,
    63.     6: 6,
    64.     8: 8,
    65.     12: 12
    66.   };
    68.   generateArray(value: number): number[] {
    69.     return new Array(value);
    70.   }
    71. }

    API

    [nz-row]directive

    成员说明类型默认值
    [nzAlign]flex 布局下的垂直对齐方式'top' | 'middle' | 'bottom''top'
    [nzGutter]栅格间隔，可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }number | object0
    [nzJustify]flex 布局下的水平排列方式'start' | 'end' | 'center' | 'space-around' | 'space-between''start'
    [nzType]布局模式，可选 flex，现代浏览器 下有效'flex'-

    [nz-col]directive

    成员说明类型默认值
    [nzOffset]栅格左侧的间隔格数，间隔内不可以有栅格number0
    [nzOrder]栅格顺序，flex 布局模式下有效number0
    [nzPull]栅格向左移动格数number0
    [nzPush]栅格向右移动格数number0
    [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 的部分)。