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
Properti | Kegunaanya |
---|---|
column-rule | Mengatur semua properti column dalam satu deklarasi |
column-count | Mengatur jumlah kolom |
column-gap | Mengatur jarak antar kolom |
column-rule-style | Mengatur gaya border kolom |
column-rule-width | Mengatur lebar border kolom |
column-rule-color | Mengatur warna border kolom |
column-span | Mengatur berapa banyak sebuah kolom elemen terbentang |
column-width | Mengatur lebar optimal sebuah kolom |