Kursus IT Dasar CSS 030_Tata letak multi-kolom Columns

Tata letak multi-kolom Columns

Columns (Kolom) adalah properti yang digunakan untuk membuat tata letak multi-kolom dalam penata-letak teks. Dengan menetapkan jumlah kolom dan lebar kolom wadah, konten teks dapat mengalir secara otomatis di antara beberapa kolom. Columns (Kolom) tidak cocok untuk semua jenis konten, terutama digunakan untuk tata letak multi-kolom konten teks, bukan untuk tata letak seluruh halaman.

• column-count： Menentukan jumlah kolom.
• column-width： Menentukan lebar setiap kolom.
• column-gap： Menentukan jarak antar kolom.
• column-rule： Menetapkan aturan (garis pembagi) antar kolom.

Contoh:

1
.example{
2
    column-count: 3;
3
    /* column-width: 200px; */
4
    column-gap: 20px;
5
    column-rule: 1px solid red;
6
}
7
p {
8
    margin: 0 0 10px;
9
}

1
    <div class="example">
2
        <p>Ini adalah paragraf 111，Ini adalah paragraf 111，Ini adalah paragraf 111。</p>
3
        <p>Ini adalah paragraf 222，Ini adalah paragraf 222，Ini adalah paragraf 222。</p>
4
        <p>Ini adalah paragraf 333，Ini adalah paragraf 333，Ini adalah paragraf 333。</p>
5
    </div>

Efek: