Grid
Grid
24 Grids System.
Importimport { Grid } from "antd"; |
Sourcecomponents/grid |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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 sections.
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.
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:
column in the horizontal space defined by row (abbreviated col).col, and only col should be placed directly in row.<Col span={8} />.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.
Common props ref：Common props
If the Ant Design grid layout component does not meet your needs, you can use the excellent layout components of the community:
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| align | Vertical alignment | top | middle | bottom | stretch | {[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'top' | 'middle' | 'bottom' | 'stretch'} | top | object: 4.24.0 |
| gutter | 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] | number | object | array | 0 | |
| justify | Horizontal arrangement | start | end | center | space-around | space-between | space-evenly | {[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'} | start | object: 4.24.0 |
| wrap | Auto wrap line | boolean | true | 4.8.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| flex | Flex layout style | string | number | - | |
| offset | The number of cells to offset Col from the left | number | 0 | |
| order | Raster order | number | 0 | |
| pull | The number of cells that raster is moved to the left | number | 0 | |
| push | The number of cells that raster is moved to the right | number | 0 | |
| span | Raster number of cells to occupy, 0 corresponds to display: none | number | none | |
| xs | screen < 576px and also default setting, could be a span value or an object containing above props | number | object | - | |
| sm | screen ≥ 576px, could be a span value or an object containing above props | number | object | - | |
| md | screen ≥ 768px, could be a span value or an object containing above props | number | object | - | |
| lg | screen ≥ 992px, could be a span value or an object containing above props | number | object | - | |
| xl | screen ≥ 1200px, could be a span value or an object containing above props | number | object | - | |
| xxl | screen ≥ 1600px, could be a span value or an object containing above props | number | object | - |
You can modify the breakpoints values using by modifying screen[XS|SM|MD|LG|XL|XXL] with theme customization (since 5.1.0, sandbox demo).
The breakpoints of responsive grid follow BootStrap 4 media queries rules (not including occasionally part).
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.
You can use the gutter property of Row 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 } for responsive design.
You can use an array to set vertical spacing, [horizontal, vertical] [16, { xs: 8, sm: 16, md: 24, lg: 32 }].
vertical gutter was supported after
3.24.0.
offset can set the column to the right side. For example, using offset = {4} can set the element shifted to the right four columns width.
By using push and pull class you can easily change column order.
Child elements depending on the value of the start, center, end, space-between, space-around and space-evenly, which are defined in its parent node typesetting mode.
Child elements vertically aligned.
To change the element sort by order.
Col provides flex prop to support fill rest.
Referring to the Bootstrap responsive design, here preset six dimensions: xs sm md lg xl xxl.
Support much more flexible responsive flex ratio, which requires CSS Variables supported by browser.
span pull push offset order property can be embedded into xs sm md lg xl xxl properties to use, where xs={6} is equivalent to xs={{span: 6}}.
A simple playground for column count and gutter.
Use useBreakpoint Hook provide personalized layout. xs only takes effect when the screen match the min width.
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-4
<Row gutter={[16, 16]}>
<Col span={6} />
<Col span={6} />
<Col span={6} />
<Col span={6} />
<Col span={6} />
<Col span={6} />
<Col span={6} />
<Col span={6} />
</Row><Row gutter={[16, 16]}>
<Col span={6} />
<Col span={6} />
<Col span={6} />
<Col span={6} />
</Row>