Hanya dengan beberapa aturan CSS, Anda dapat membuat tata letak yang terinspirasi dari cetakan yang memiliki fleksibilitas web. Ini seperti mengambil koran, tetapi saat kertas semakin kecil, kolom akan menyesuaikan dan menyeimbangkan secara otomatis sehingga konten mengalir secara alami.
.intro ( columns: 300px 2; )The columnsproperti akan menerima column-count, column-widthatau kedua properti.
columns: || ;Menggunakan keduanya column-countdan column-widthdisarankan untuk membuat tata letak multi-kolom yang fleksibel. Ini column-countakan bertindak sebagai jumlah kolom maksimum, sedangkan column-widthakan menentukan lebar minimum untuk setiap kolom. Dengan menggabungkan properti ini, tata letak multi-kolom akan secara otomatis dipecah menjadi satu kolom pada lebar browser yang sempit tanpa memerlukan kueri media atau aturan lain.
Tata letak multi-kolom berfungsi dengan baik pada elemen blok termasuk daftar untuk membuat navigasi yang fleksibel.
Untuk lebih menyempurnakan tata letak multi-kolom Anda, gunakan break-insidepada elemen tertentu agar tidak terjebak di antara kolom.
Informasi lebih lanjut
- Modul Tata Letak Multikolom CSS Level 1 (Draf Kerja)
- Dokumentasi MDN
Dukungan browser
| YAITU | Tepi | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Semua | 9+ | 50+ | Semua | 11.5+ |
| Android Chrome | Android Firefox | Browser Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Semua | Semua | Semua | Semua | Semua |