> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# ColumnsLayout Layout Container

> Reference for the ColumnsLayout layout container component. Learn about 12-column layout configuration, preset layouts, and mobile line-wrapping rules to build flexible multi-column pages.

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

| Attribute      | Description                                                                                    | Type                         | Default      |
| -------------- | ---------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
| `columnGap`    | Sets the gap between adjacent columns.                                                         | `number`                     | `0`          |
| `display`      | Column arrangement on mobile devices.                                                          | `'VERTICAL' \| 'HORIZONTAL'` | `'VERTICAL'` |
| `layout`       | Column configuration that defines the number of columns per row and the ratio for each column. | `string`                     | `'6:6'`      |
| `mobileRowGap` | Row gap for vertical layout on mobile devices.                                                 | `string`                     | `'16px'`     |
| `rowGap`       | Sets the gap between adjacent rows in multi-row column layouts.                                | `number`                     | `0`          |