.
col
spans in a row
are more than 24, then the overflowing col
as a whole will start a new line arrangement.Our grid systems base on 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
.
Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
import { NzGridModule } from 'ng-zorro-antd/grid';
Loading...
Loading...
Loading...
Loading...
sub-element align left
sub-element align center
sub-element align right
sub-element monospaced arrangement
sub-element align full
Loading...
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
Loading...
Loading...
Percentage columns
Fill rest
Raw flex style
Loading...
Loading...
Loading...
Loading...
Property | Description | Type | Default |
---|---|---|---|
[nzAlign] | the vertical alignment | 'top'|'middle'|'bottom' | - |
[nzGutter] | spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24} . or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical] | string|number|object|[number, number]|[object, object] | 0 |
[nzJustify] | horizontal arrangement | 'start'|'end'|'center'|'space-around'|'space-between' | - |
Property | Description | Type | Default |
---|---|---|---|
[nzFlex] | flex layout style | string | number | - |
[nzOffset] | the number of cells to offset Col from the left | number | 0 |
[nzOrder] | raster order | number | 0 |
[nzPull] | the number of cells that raster is moved to the left | number | 0 |
[nzPush] | the number of cells that raster is moved to the right | number | 0 |
[nzSpan] | raster number of cells to occupy, 0 corresponds to display: none | number | - |
[nzXs] | <576px and also default setting, could be a span value or an object containing above props | number | object | - |
[nzSm] | ≥576px , could be a span value or an object containing above props | number | object | - |
[nzMd] | ≥768px , could be a span value or an object containing above props | number | object | - |
[nzLg] | ≥992px , could be a span value or an object containing above props | number | object | - |
[nzXl] | ≥1200px , could be a span value or an object containing above props | number | object | - |
[nzXXl] | ≥1600px , could be a span value or an object containing above props | number | object | - |
The breakpoints of responsive grid follow BootStrap 4 media queries rules(not including occasionally part
).