CSS3 Multi-column Layout

Pernah baca koran atau majalah?

Di koran tersebut, biasanya tulisannya dibagi menjadi beberapa kolom bukan?

Nah, di web kita juga bisa melakukannya dengan menggunakan css3 multi-column.

Buat multi column

Untuk membuat multi column sangat mudah. Tinggal gunakan property column-count.

Ini adalah contoh teks yang digunakan untuk membuat multi kolom. Kolom yang digunakan adalah berjumlah 3. Ini bisa disetting, mau berapapun sesuai dengan kebutuhan. Tapi, metode ini jarang dipakai di web apalagi web berita.

p { column-count: 3; }

Mengatur panjang kolom

Selain dengan column-count, kita juga bisa mengatur panjang dari kolom tersebut dengan column-width.

Ini adalah contoh teks yang digunakan untuk membuat multi kolom. Kolom yang digunakan adalah berjumlah 3. Ini bisa disetting, mau berapapun sesuai dengan kebutuhan. Tapi, metode ini jarang dipakai di web apalagi web berita.

p { column-width: 100px; }

Jumlah kolom akan otomatis menyesuaikan dengan panjang width yang ditentukan.

Misal, jika kontainer box adalah 450px maka dengan panjang 100px kolomnya menjadi 450 / 100 ya sekitar 4 kolom.

Mengatur jarak antar kolom

Jarak antar kolom juga bisa diatur dengan column-gap.

Ini adalah contoh teks yang digunakan untuk membuat multi kolom. Kolom yang digunakan adalah berjumlah 3. Ini bisa disetting, mau berapapun sesuai dengan kebutuhan. Tapi, metode ini jarang dipakai di web apalagi web berita.

p {
 column-count: 3; 
 column-gap: 100px;
 }

Setting column rule

Kita bisa mengatur bagaimana jarak antar kolom tersebut. Misal mau dikasih warna seperti apa dengan tebel seberapa.

Ini adalah contoh teks yang digunakan untuk membuat multi kolom. Kolom yang digunakan adalah berjumlah 3. Ini bisa disetting, mau berapapun sesuai dengan kebutuhan. Tapi, metode ini jarang dipakai di web apalagi web berita.

p {
 column-count: 3;
 column-rule-color: blue;
 column-rule-style: solid;
 column-rule-width: 3px;
}

Dapat juga ditulis:

p {
 column-count: 3;
 column-rule: 3px solid blue;
}

Column span

Digunakan untuk memilih element yang tidak ikut terkena efek pembagian kolom dengan menambahkan property column-span ke element yang diingkan tidak kena kolom.

Contoh:

<style>
#kolom {
column-count: 3; 
column-rule: 3px solid blue; 
padding:5px;
border: 1px solid black;
margin-bottom:30px;
}
#kolom h2 {
column-span: all;
}
</style>
<div id="kolom">
<h2>Ini judul yang tidak kena efek kolom</h2>
<p>Ini adalah contoh teks yang digunakan untuk membuat multi kolom. Kolom yang digunakan adalah berjumlah 3. Ini bisa disetting, mau berapapun sesuai dengan kebutuhan. Tapi, metode ini jarang dipakai di web apalagi web berita.</p>
</div>

Semua element di dalam id kolom terkena efek menjadi 3 kolom kecuali h2