> ## 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.

# Kontainer Tata letak ColumnsLayout

> Referensi Komponen kontainer tata letak ColumnsLayout di YiDA. Pelajari konfigurasi tata letak 12 Kolom, tata letak preset, dan aturan pembungkusan baris pada perangkat mobile untuk membangun Halaman multi-Kolom yang fleksibel.

Kontainer tata letak digunakan untuk membuat tata letak multi-Kolom. Secara Default, Komponen ini terbagi menjadi 12 Kolom dan menyediakan beberapa tata letak preset, serta mendukung tata letak Kustom. Pada perangkat mobile, setiap baris mendukung hingga 4 Kolom; Kolom yang melebihi 4 akan dibungkus ke baris berikutnya, dan baris hasil pembungkusan akan mengisi lebar secara horizontal.

* Berikut adalah penggunaan Dasar Komponen ini: satu baris dibagi menjadi tiga Kolom yang sama dengan jarak antar-Kolom sebesar 15px. Anda dapat mengubah nilai ini secara langsung di tampilan desain.
* Untuk baris dan Kolom Kustom, masukkan nilai rasio setiap Kolom pada **Tata letak - Baris dan Kolom Kustom** di panel Pengaturan sebelah kanan, dengan Format `2:2:2:2:4`.
* Untuk penggunaan multi-baris, masukkan nilai rasio setiap Kolom pada **Tata letak - Baris dan Kolom Kustom** di panel Pengaturan sebelah kanan, dengan Format `2:2:2:2:4:6:6`. Jika total rasio melebihi 12, tata letak akan dibungkus ke baris berikutnya. Disarankan menjaga total tetap kelipatan 12. Untuk tata letak multi-baris, Anda mungkin perlu mengonfigurasi jarak antar-baris (jarak vertikal).

## Kapan digunakan

* Gunakan Komponen ini ketika Anda perlu menerapkan tata letak multi-Kolom pada Halaman atau bagian tertentu.

## Contoh Komponen

## Properti Komponen

| Atribut        | Deskripsi                                                                        | Tipe                         | Default      |
| -------------- | -------------------------------------------------------------------------------- | ---------------------------- | ------------ |
| `columnGap`    | Mengatur jarak antara Kolom yang bersebelahan.                                   | `number`                     | `0`          |
| `display`      | Susunan Kolom pada perangkat mobile.                                             | `'VERTICAL' \| 'HORIZONTAL'` | `'VERTICAL'` |
| `layout`       | Konfigurasi Kolom yang menentukan jumlah Kolom per baris dan rasio setiap Kolom. | `string`                     | `'6:6'`      |
| `mobileRowGap` | Jarak antar baris untuk tata letak vertikal pada perangkat mobile.               | `string`                     | `'16px'`     |
| `rowGap`       | Mengatur jarak antara baris yang bersebelahan pada tata letak Kolom multi-baris. | `number`                     | `0`          |