> ## 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 レイアウトコンテナ

> YiDA の ColumnsLayout レイアウトコンテナコンポーネントについて解説します。12 カラムレイアウトの設定方法、プリセットレイアウト、モバイル端末での折り返しルールを紹介し、柔軟なマルチカラムページの構築を支援します。

レイアウトコンテナは、マルチカラムレイアウトの作成に使用します。デフォルトでは、コンポーネントは 12 カラムに分割され、複数のプリセットレイアウトが用意されているほか、カスタムレイアウトにも対応します。モバイル端末では、1 行あたり最大 4 カラムまで表示可能です。4 カラムを超える場合は次の行に折り返され、折り返された行は横幅いっぱいに表示されます。

* コンポーネントの基本的な使用方法：1 行を等幅の 3 カラムに分割し、カラム間隔を 15px に設定します。これらの値はデザインビューで直接変更できます。
* カスタム行・カラムを使用する場合：右側の設定パネルの **レイアウト - カスタム行・カラム** で、各カラムの比率値を `2:2:2:2:4` のような形式で入力します。
* 複数行で使用する場合：右側の設定パネルの **レイアウト - カスタム行・カラム** で、各カラムの比率値を `2:2:2:2:4:6:6` のような形式で入力します。比率の合計が 12 を超えると、次の行に折り返されます。合計は 12 の倍数に保つことを推奨します。複数行レイアウトでは、行間隔（垂直方向の間隔）の設定が必要となる場合があります。

## 使用シーン

* ページまたはセクションにマルチカラムレイアウトを適用したい場合に、このコンポーネントを使用します。

## コンポーネント例

## コンポーネントの属性

| 属性             | 説明                              | タイプ                          | デフォルト        |
| -------------- | ------------------------------- | ---------------------------- | ------------ |
| `columnGap`    | 隣接するカラム間の間隔を設定します。              | `number`                     | `0`          |
| `display`      | モバイル端末でのカラムの配置方法。               | `'VERTICAL' \| 'HORIZONTAL'` | `'VERTICAL'` |
| `layout`       | 1 行あたりのカラム数と各カラムの比率を定義するカラム設定。  | `string`                     | `'6:6'`      |
| `mobileRowGap` | モバイル端末での垂直レイアウト時の行間隔。           | `string`                     | `'16px'`     |
| `rowGap`       | 複数行カラムレイアウトにおける隣接する行間の間隔を設定します。 | `number`                     | `0`          |