ColumnsLayout Layout Container

Layout container can be used to implement column layout. The component is divided into 12 columns by default, and has multiple preset layout methods, while also supporting custom layouts. On mobile devices, one row only supports 4 columns, and more than 4 columns will be wrapped to the next line, and if wrapped, a single line will be horizontally filled.

• This is the basic usage of the component, three equal columns in a single row, with a column spacing of 15px, you can modify it directly in design mode.
• Custom row and column usage, enter the proportion values of each column in the right panel configuration under Layout - Custom Rows and Columns, format is 2:2:2:2:4.
• Multi-row usage, enter the proportion values of each column in the right panel configuration under Layout - Custom Rows and Columns, format is 2:2:2:2:4:6:6, Once the sum of proportions is greater than 12, it will render in a new row, it is recommended to always keep the total as a multiple of 12. In multi-row cases, you may need to set row spacing (vertical spacing).

When to use

• Used when you need to implement column layout for pages or blocks.

Component Example

Component Properties

属性	说明	类型	默认值
columnGap	Set the spacing between adjacent columns of the column	number	0
display	Mobile device column arrangement method	'VERTICAL' | 'HORIZONTAL'	'VERTICAL'
layout	Column configuration, how many columns per row, how many grids each column occupies	string	'6:6'
mobileRowGap	Row spacing when vertically layout on mobile device	string	'16px'
rowGap	In multi-row column scenarios, set the spacing between adjacent rows of the column	number	0