Grid

24 Grids System。

Design concept#

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

In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 aliquots.

We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.

Outline#

In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.

Following is a brief look at how it works:

  • Establish a set of column in the horizontal space defined by row (abbreviated col)
  • Your content elements should be placed directly in the col, and only col should be placed directly in row
  • The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by .col-8 (span=8).
  • If the sum of col spans in a row are more than 24, then the overflowing col as a whole will start a new line arrangement.

Flex layout#

Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using order.

Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.

Examples

col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6

From the stack to the horizontal arrangement.

You can create a basic grid system by using a single set of nz-row and nz-col grid assembly, all of the columns (nz-col) must be placed in nz-row.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-basic',
  template: `
    <div nz-row>
      <div nz-col nzSpan="12">col-12</div>
      <div nz-col nzSpan="12">col-12</div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="8">col-8</div>
      <div nz-col nzSpan="8">col-8</div>
      <div nz-col nzSpan="8">col-8</div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="6">col-6</div>
      <div nz-col nzSpan="6">col-6</div>
      <div nz-col nzSpan="6">col-6</div>
      <div nz-col nzSpan="6">col-6</div>
    </div>
  `
})
export class NzDemoGridBasicComponent {}
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6

You can use the nzGutter property of nzRow as grid spacing, we recommend set it to (16 + 8n) px. (n stands for natural number.)

You can set it to a object like { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 } for responsive design.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-gutter',
  template: `
    <div class="gutter-example">
      <div nz-row nzGutter="16">
        <div nz-col class="gutter-row" nzSpan="6">
          <div class="gutter-box">col-6</div>
        </div>
        <div nz-col class="gutter-row" nzSpan="6">
          <div class="gutter-box">col-6</div>
        </div>
        <div nz-col class="gutter-row" nzSpan="6">
          <div class="gutter-box">col-6</div>
        </div>
        <div nz-col class="gutter-row" nzSpan="6">
          <div class="gutter-box">col-6</div>
        </div>
      </div>
    </div>
    <div class="gutter-example">
      <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }">
        <div nz-col class="gutter-row" nzSpan="6">
          <div class="gutter-box">col-6</div>
        </div>
        <div nz-col class="gutter-row" nzSpan="6">
          <div class="gutter-box">col-6</div>
        </div>
        <div nz-col class="gutter-row" nzSpan="6">
          <div class="gutter-box">col-6</div>
        </div>
        <div nz-col class="gutter-row" nzSpan="6">
          <div class="gutter-box">col-6</div>
        </div>
      </div>
    </div>
  `,
  styles: [
    `
      .gutter-box {
        background: #00a0e9;
        padding: 5px 0;
      }
    `
  ]
})
export class NzDemoGridGutterComponent {}
col-8
col-8
col-6 col-offset-6
col-6 col-offset-6
col-12 col-offset-6

nzOffset can set the column to the right side. For example, using nzOffset = "4" can set the element shifted to the right four columns width.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-offset',
  template: `
    <div nz-row>
      <div nz-col nzSpan="8">
        col-8
      </div>
      <div nz-col nzSpan="8" nzOffset="8">
        col-8
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="6" nzOffset="6">
        col-6 col-offset-6
      </div>
      <div nz-col nzSpan="6" nzOffset="6">
        col-6 col-offset-6
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12" nzOffset="6">
        col-12 col-offset-6
      </div>
    </div>
  `,
  styles: []
})
export class NzDemoGridOffsetComponent {}
col-18 col-push-6
col-6 col-pull-18

By using nzPush and nzPull class you can easily change column order.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-sort',
  template: `
    <div nz-row>
      <div nz-col [nzSpan]="18" [nzPush]="6">
        col-18 col-push-6
      </div>
      <div nz-col [nzSpan]="6" [nzPull]="18">
        col-6 col-pull-18
      </div>
    </div>
  `,
  styles: []
})
export class NzDemoGridSortComponent {}

sub-element align left

col-4
col-4
col-4
col-4

sub-element align center

col-4
col-4
col-4
col-4

sub-element align right

col-4
col-4
col-4
col-4

sub-element monospaced arrangement

col-4
col-4
col-4
col-4

sub-element align full

col-4
col-4
col-4
col-4

Use nzType defineflex layout, its child elements depending on the value of the start,center, end,space-between, space-around, which are defined in its parent node layout mode.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-flex',
  template: `
    <div>
      <p>sub-element align left</p>
      <div nz-row nzType="flex" nzJustify="start">
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
      </div>
      <p>sub-element align center</p>
      <div nz-row nzType="flex" nzJustify="center">
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
      </div>
      <p>sub-element align right</p>
      <div nz-row nzType="flex" nzJustify="end">
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
      </div>
      <p>sub-element monospaced arrangement</p>
      <div nz-row nzType="flex" nzJustify="space-between">
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
      </div>
      <p>sub-element align full</p>
      <div nz-row nzType="flex" nzJustify="space-around">
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
        <div nz-col nzSpan="4">col-4</div>
      </div>
    </div>
  `
})
export class NzDemoGridFlexComponent {}

Align Top

col-4

col-4

col-4

col-4

Align Center

col-4

col-4

col-4

col-4

Align Bottom

col-4

col-4

col-4

col-4

Flex child elements vertically aligned.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-flex-align',
  template: `
    <div>
      <p>Align Top</p>
      <div nz-row nzType="flex" nzJustify="center" nzAlign="top">
        <div nz-col nzSpan="4"><p class="height-100">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-50">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-120">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-80">col-4</p></div>
      </div>
      <p>Align Center</p>
      <div nz-row nzType="flex" nzJustify="space-around" nzAlign="middle">
        <div nz-col nzSpan="4"><p class="height-100">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-50">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-120">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-80">col-4</p></div>
      </div>
      <p>Align Bottom</p>
      <div nz-row nzType="flex" nzJustify="space-between" nzAlign="bottom">
        <div nz-col nzSpan="4"><p class="height-100">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-50">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-120">col-4</p></div>
        <div nz-col nzSpan="4"><p class="height-80">col-4</p></div>
      </div>
    </div>
  `,
  styles: []
})
export class NzDemoGridFlexAlignComponent {}
1 col-order-4
2 col-order-3
3 col-order-2
4 col-order-1

To change the element sort by Flex layout nzOrder.

expand codeexpand code
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-flex-order',
  template: `
    <div nz-row nzType="flex">
      <div nz-col nzSpan="6" [nzOrder]="order" *ngFor="let order of orderList; index as i">
        {{ i + 1 }} col-order-{{ order }}
      </div>
    </div>
  `,
  styles: []
})
export class NzDemoGridFlexOrderComponent implements OnInit {
  orderList = [1, 2, 3, 4];

  ngOnInit(): void {
    setTimeout(() => {
      this.orderList = [...this.orderList.reverse()];
    }, 10000);
  }
}
Col
Col
Col

Referring to the Bootstrap responsive design, here preset five dimensions: xssmmdlgxl.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-responsive',
  template: `
    <div nz-row>
      <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
        Col
      </div>
      <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">
        Col
      </div>
      <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
        Col
      </div>
    </div>
  `,
  styles: []
})
export class NzDemoGridResponsiveComponent {}
Col
Col
Col

spanpullpushoffsetorder property can be embedded into nzXsnzSmnzMdnzLgnzXlnzXXl properties to use, where nzXs="6" is equivalent to [nzXs]="{ span: 6 }".

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-responsive-more',
  template: `
    <div nz-row>
      <div nz-col [nzXs]="{ span: 5, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
        Col
      </div>
      <div nz-col [nzXs]="{ span: 11, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
        Col
      </div>
      <div nz-col [nzXs]="{ span: 5, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
        Col
      </div>
    </div>
  `,
  styles: []
})
export class NzDemoGridResponsiveMoreComponent {}
Gutter (px):
81624324048
Column Count:
2346812
Column
Column
Column
Column

A simple playground for column count and gutter.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-grid-playground',
  template: `
    <div style="margin-bottom:16px;">
      <span style="margin-right: 6px;">Gutter (px): </span>
      <div style="width: 50%">
        <nz-slider
          [nzMarks]="marksGutter"
          [nzStep]="null"
          [nzDefaultValue]="16"
          [nzMax]="48"
          [(ngModel)]="gutter"
        ></nz-slider>
      </div>
      <span style="margin-right: 6px;">Column Count:</span>
      <div style="width: 50%">
        <nz-slider
          [nzMarks]="marksCount"
          [nzStep]="null"
          [nzDefaultValue]="4"
          [nzMax]="12"
          [(ngModel)]="count"
        ></nz-slider>
      </div>
    </div>

    <div class="gutter-example">
      <div nz-row [nzGutter]="gutter">
        <div nz-col class="gutter-row" [nzSpan]="24 / count" *ngFor="let i of generateArray(count)">
          <div class="grid-config">Column</div>
        </div>
      </div>
    </div>
  `,
  styles: [
    `
      .grid-config {
        background: #00a0e9;
        height: 120px;
        line-height: 120px;
        font-size: 13px;
      }
    `
  ]
})
export class NzDemoGridPlaygroundComponent {
  gutter = 16;
  count = 4;
  marksGutter = {
    8: 8,
    16: 16,
    24: 24,
    32: 32,
    40: 40,
    48: 48
  };
  marksCount = {
    2: 2,
    3: 3,
    4: 4,
    6: 6,
    8: 8,
    12: 12
  };

  generateArray(value: number): number[] {
    return new Array(value);
  }
}

API#

Import this Component Individually#

You can get more detail here.

import { NzGridModule } from 'ng-zorro-antd';

[nz-row]#

PropertyDescriptionTypeDefault
[nzAlign]the vertical alignment of the flex layout'top'|'middle'|'bottom''top'
[nzGutter]spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }number|object0
[nzJustify]horizontal arrangement of the flex layout'start'|'end'|'center'|'space-around'|'space-between''start'
[nzType]layout mode, optional flex, browser support'flex'-

[nz-col]#

PropertyDescriptionTypeDefault
[nzOffset]the number of cells to offset Col from the leftnumber0
[nzOrder]raster order, used in flex layout modenumber0
[nzPull]the number of cells that raster is moved to the leftnumber0
[nzPush]the number of cells that raster is moved to the rightnumber0
[nzSpan]raster number of cells to occupy, 0 corresponds to display: nonenumber-
[nzXs]<576px and also default setting, could be a span value or an object containing above propsnumber|object-
[nzSm]≥576px, could be a span value or an object containing above propsnumber|object-
[nzMd]≥768px, could be a span value or an object containing above propsnumber|object-
[nzLg]≥992px, could be a span value or an object containing above propsnumber|object-
[nzXl]≥1200px, could be a span value or an object containing above propsnumber|object-
[nzXXl]≥1600px, could be a span value or an object containing above propsnumber|object-

The breakpoints of responsive grid follow BootStrap 4 media queries rules(not including occasionally part).