> ## 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 布局容器

> ColumnsLayout 布局容器组件参考，介绍 12 栏分栏配置、预置布局与移动端换行规则，实现灵活的多栏页面布局。

布局容器可以用来实现分栏布局。 组件默认分为 12 栏，并预置了多种布局方式，同时也支持自定义布局。 手机端一行只支持 4 栏，超过 4 栏的会换行处理，如果换行后单行会横向铺满。

* 这是组件的基本用法，单行分为等份的三栏，分栏的间隔是 15px 时的效果，你可以直接在设计态中修改。
* 自定义行列用法，在右侧配置中的 布局-自定义行列 中输入各栏的比例值即可，格式为 `2:2:2:2:4`。
* 多行用法，在右侧配置中的 布局-自定义行列 中输入各栏的比例值即可，格式为 `2:2:2:2:4:6:6` ，
  一旦比例之和大于 12 时就会另换一行渲染，建议总数始终保持 12 的倍数。多行的情况下，可能需要
  设置行间距（上下间距）。

## 何时使用

* 当需要对页面或者区块进行分栏布局时使用。

## 组件示例

<iframe src="https://www.aliwork.com/developer/columns-layout-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性             | 说明                     | 类型                           | 默认值          |
| -------------- | ---------------------- | ---------------------------- | ------------ |
| `columnGap`    | 设置分栏相邻列之间的间距           | `number`                     | `0`          |
| `display`      | 手机端的分栏排列方式             | `'VERTICAL' \| 'HORIZONTAL'` | `'VERTICAL'` |
| `layout`       | 分栏配置，每行分为几栏，每一栏分别占几格   | `string`                     | `'6:6'`      |
| `mobileRowGap` | 手机端的垂直布局时的行间距          | `string`                     | `'16px'`     |
| `rowGap`       | 在多行分栏的场景下，设置分栏相邻行之间的间距 | `number`                     | `0`          |