Skip to main content
The layout container is used to create multi-column layouts. By default, the component is divided into 12 columns and provides several preset layouts, while also supporting custom layouts. On mobile devices, each row supports up to 4 columns; any additional columns wrap to a new line, and wrapped rows fill the width horizontally.
  • This is the basic usage of the component: a single row divided into three equal columns with a 15px column gap. Modify these values directly in the design view.
  • For custom rows and columns, enter the ratio value for each column under Layout - Custom Rows and Columns in the settings panel on the right, using the format 2:2:2:2:4.
  • For multi-row usage, enter the ratio value for each column under Layout - Custom Rows and Columns in the settings panel on the right, using the format 2:2:2:2:4:6:6. Once the sum of ratios exceeds 12, the layout wraps to a new row. Keep the total as a multiple of 12 whenever possible. For multi-row layouts, you may also need to configure the row gap (vertical spacing).

​
When to Use

  • Use this component when you need to apply a multi-column layout to a page or section.

​
Component Example

​
Component Properties