logo

Grid

24 Grids System。

Design concept#

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.

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 .
  • 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.

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.

Examples

From the stack to the horizontal arrangement.

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

expand code expand code

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 a array to set vertical spacing, [horizontal, vertical] [16, { xs: 8, sm: 16, md: 24, lg: 32 }].

expand code expand code

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.

expand code expand code

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

expand code expand code

Child elements depending on the value of the start,center, end,space-between, space-around, which are defined in its parent node typesetting mode.

expand code expand code

Child elements vertically aligned.

expand code expand code

To change the element sort by order.

expand code expand code

GridCol provides flex prop to support fill rest.

expand code expand code

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

expand code expand code

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}}.

expand code expand code

A simple playground for column count and gutter.

expand code expand code

Use OnBreakpoint provide personalized layout.

expand code expand code

Grid API#

Row API#

Property Description Type Default Value
ChildContent ParameterContent of the row, generally contains Col elements. RenderFragment --
Type ParameterCurrently unused String --
Align ParameterVertical alignment for the flex layout: 'top' | 'middle' | 'bottom' String --
Justify ParameterHotizontal alignment for the flex layout: 'start' | 'end' | 'center' | 'space-around' | 'space-between' String --
Wrap ParameterAllow the row's content to wrap or not Boolean true
Gutter ParameterSpacing between grids, could be a number or a dictionary like { xs: 8, sm: 16, md: 24 }, an array to make horizontal and vertical spacing work at the same time [horizontal, vertical] OneOf<Int32, Dictionary<String, Int32>, ValueTuple<Int32, Int32>, ValueTuple<Dictionary<String, Int32>, Int32>, ValueTuple<Int32, Dictionary<String, Int32>>, ValueTuple<Dictionary<String, Int32>, Dictionary<String, Int32>>> --
OnBreakpoint ParameterCallback executed when a screen size breakpoint is triggered EventCallback<BreakpointType> --
DefaultBreakpoint ParameterDefault screen size breakpoint. Used to set gutter during pre-rendering BreakpointType? --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --

Col API#

Property Description Type Default Value
ChildContent ParameterContent of column RenderFragment --
Flex ParameterUse flex mode or not. Will not use flex mode if null. OneOf<String, Int32> --
Span ParameterWidth of Col OneOf<String, Int32> --
Order ParameterOrder of Col, used in flex mode OneOf<String, Int32> --
Offset ParameterThe number of Cols to offset Col from the left OneOf<String, Int32> --
Push ParameterThe number of Cols to push the Col to the right OneOf<String, Int32> --
Pull ParameterThe number of Cols to pull the Col to the left OneOf<String, Int32> --
Xs Parameter<576px column of grid OneOf<Int32, EmbeddedProperty> --
Sm Parameter≥576px column of grid OneOf<Int32, EmbeddedProperty> --
Md Parameter≥768px column of grid OneOf<Int32, EmbeddedProperty> --
Lg Parameter≥992px column of grid OneOf<Int32, EmbeddedProperty> --
Xl Parameter≥1200px column of grid OneOf<Int32, EmbeddedProperty> --
Xxl Parameter≥1600px column of grid OneOf<Int32, EmbeddedProperty> --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --

EmbeddedProperty API#

Property Description Type Default Value
Span Width of Col OneOf<String, Int32> --
Pull The number of Cols to pull the Col to the left OneOf<String, Int32> --
Push The number of Cols to push the Col to the right OneOf<String, Int32> --
Offset The number of Cols to offset Col from the left OneOf<String, Int32> --
Order Order of Col, used in flex mode OneOf<String, Int32> --
Flex Layout
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.