Grid 24 Grids System

Design concept

In most business situations,Ant Design need 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 as 'box'.We suggest that four boxes horizontal arrangement at most, one at least.Box on the proportion of the entire screen as above picture.To ensure that the level of visual comfort,we custom 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 steady arrangement.

Following is a brief look at how it works:

• To establish a set of column in the horizontal direction by row (abbreviated col)
• Direct your content elements should be placed in the col, and only col as the 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.
• If a row sum of col more than 24, then the extra col as a whole will start a new line arrangement.

Flex layout

Our grid systems support Flex layout to allow the child elements within the parent horizontal alignment - Left, center, right of abode, and other wide arrangement, decentralized arrangement. Between sub-elements and sub-elements, support the top of the aligned vertically centered, bottom-aligned manner. At the same time, you can define the order of elements by using 'order'.

Flex layout is based on a grid 24 to define each "box" in width, but not rigidly adhere to the grid layout.

Examples

Base Grid

From the stack to the horizontal arrangement.

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

Grid Gutter

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

Column offset

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

Grid sort

By using push and pull class you can easily change column order.

Flex Layout

Use row-flex define flex 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.

Flex Alignment

Flex child elements vertically aligned.

Flex Order

To change the element sort by Flex layout order.

Responsive

Referring to the Bootstrap responsive design, here preset five dimensions: xs sm md lg xl.

Playground

{{code}}