Dalam tata letak multi-kolom, Anda dapat membuat elemen meluas di seluruh kolom dengan column-span.
h2 ( -webkit-column-span: all; column-span: all; )Tetapkan column-spanke elemen di dalam tata letak multi-kolom untuk menjadikannya elemen rentang. Tata letak multi-kolom akan dilanjutkan dengan elemen non-rentang berikutnya.
Nilai column-spancan be allatau none.
Tetapkan elemen dengan column-span: alluntuk membuatnya menjangkau kolom.
Nilai noneproperti adalah tombol pemutus untuk elemen rentang. Anda dapat menggunakan ini saat bekerja dengan kueri media untuk memberi tahu elemen rentang untuk berhenti merentang.
Lihat contoh kolom-span Pena oleh CSS-Tricks (@ css-trick) di CodePen.
Dukungan Browser
Firefox tidak mendukung ini column-span, tetapi ada solusi yang menarik.
Berikut adalah dukungan untuk tata letak Multi-kolom secara umum:
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Jangan lupa awalan Anda!