Grid System

Quickly and easily create layouts with the basic 12-column.

TIP

The component uses flex layout by default, no need to set type="flex" manually.

Please note that the parent container should avoid using inline related styles, which will cause the component to not fill up its width.

Basic

Row provides gutter attribute to specify spacings between columns, and its default value is 6.

Default use the flex layout to make flexible alignment of columns.

You can define the layout of child elements by setting justify attribute with start, center, end, space-between, space-around or space-evenly.

Columns can be re-arranged by set order value.

Set different column spans for each breakpoints. Resize browser to see them in action.

Attribute	Description	Type	Accepted Values	Default
gutter	grid spacing	number	—	6
justify	horizontal alignment of flex layout	string	start/center/end/space-around/space-between/space-evenly	start
items	vertical alignment of flex layout	string	start/center/end	start
tag	custom element tag	string	*	div

Name	Description	Subtags
—	customize default content	Col

Attribute	Description	Type	Accepted Values	Default
span	number of column the grid spans	number	—	12
order	reorder columns in the grid	number	—	0
xs	`<768px` Responsive columns or column props object	number/object (e.g. {span: 4, order: 4})	—	—
sm	`≥768px` Responsive columns or column props object	number/object (e.g. {span: 4, order: 4})	—	—
md	`≥992px` Responsive columns or column props object	number/object (e.g. {span: 4, order: 4})	—	—
lg	`≥1200px` Responsive columns or column props object	number/object (e.g. {span: 4, order: 4})	—	—
xl	`≥1400px` Responsive columns or column props object	number/object (e.g. {span: 4, order: 4})	—	—
tag	custom element tag	string	*	div

Name	Description
—	customize default content