Cara membuat CSS multi columns

Kegunaan CSS multi-colomns

Pada CSS3 terdapat fitur baru yaitu properti multi-column. Dengan properti ini Anda bisa menggunakannya untuk membuat tata letak beberapa kolom sekaligus dengan cara yang mudah dan efisien.

Anda bisa membuat beberapa tata letak kolom seperti disurat kabar, majalah dan koran. Berikut daftar properti multi-colomn:

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

Column-count

Properti colomn-count digunakan untuk menentukan jumlah kolom pada elemen yang akan dibagi.

#majalah {
    column-count: 3;
}

Cloumn-gap

Properti column-gap digunakan untuk memberi jarak antar kolom. Jarak yang sama diterapkan di antara setiap kolom dan secara default jarak antar kolom 1em.

#majalah {
    column-count: 3;
    column-gap: 50px;
}

Column-rule-style

Properti column-rule-style digunakan untuk memberikan gaya border disetiap kolom.

#majalah {
    column-count: 3;
    column-gap: 50px;
    column-rule-style: dotted;
}

Column-rule-width

Properti column-rule-width digunakan untuk memberikan lebar border disetiap kolom.

#majalah {
    column-count: 3;
    column-gap: 50px;
    column-rule-style: dotted;
    column-rule-width: 5px;
}

Column-rule-color

Properti column-rule-color digunakan untuk memberikan warna border disetiap kolom.

#majalah {
    column-count: 3;
    column-gap: 50px;
    column-rule-style: dotted;
    column-rule-width: 5px;
    column-rule-color: blue;
}

Column shorthand

Dengan column-rule shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti column-rule dalam satu properti tunggal.

Untuk menggunakan colomn-rule shorthand Anda cukup menggunakan properti colomn-rule. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan colomn-rule-* individu.

#majalah {
    column-count: 3;
    column-gap: 50px;
    column-rule: 5px dotted blue;
}

Column-span

Properti column-span digunakan untuk menentukan berapa banyak sebuah kolom elemen terbentang.

#majalah {
    column-count: 3;
    column-gap: 50px;
    column-rule: 5px dotted blue;
}
h1 {
  column-span: all;
}

Column-width

Properti column-width digunakan untuk menentukan lebar optimal sebuah kolom.

#majalah {
    column-count: 3;
    column-width: 100px;
}

Daftar properti column