Untuk membuat kolom berbeda, Anda dapat menambahkan garis vertikal di antara setiap kolom. Garis itu berada di tengah celah kolom. Jika Anda pernah menata border, maka Anda siap untuk menata column-rule.
.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )Properti ini adalah singkatan dari column-rule-width,, column-rule-styledan column-rule-color, yang merupakan pola yang sama borderdan menerima nilai yang sama.
-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;column-rule-widthbisa berupa panjang 3pxatau nilai kata kunci seperti thin.
column-rule-stylebisa salah satu border-stylenilai-nilai seperti solid, dotted, dan dashed.
column-rule-color dapat berupa nilai warna apa pun.
Tidak seperti column-gap, column-ruletidak memakan tempat. Jika column-rule-widthlebih tebal dari column-gapmaka aturan akan meluas di bawah kolom.
Aturan vertikal hanya akan ada di antara kolom yang memiliki konten.
Dukungan Browser
Dukungan tata letak multi-kolom:
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Apa saja | 3+ | 1,5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Jangan lupa awalan Anda!