Kolom melakukan pekerjaan yang baik untuk mengalirkan dan menyeimbangkan konten. Sayangnya, tidak semua elemen mengalir dengan baik. Terkadang elemen terjebak di antara kolom.
Untungnya, Anda dapat memberi tahu browser untuk menyatukan elemen tertentu break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Saat ini, properti secara universal menerima nilai autodan avoid.
Gunakan avoidpada elemen dalam tata letak multi-kolom agar properti tidak pecah.
Perhatikan sintaks untuk properti ini karena ada beberapa variasi di antara browser.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Properti mengambil setelah properti hentian halaman dan berbagi nilai yang sama. Untuk saat ini, Firefox menggunakan page-break-inside.
Lihat contoh break-inside kolom Pen (CSS-Tricks) oleh Katy DeCorah (@katydecorah) di CodePen.
Dukungan Browser
Properti jeda halaman:
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 | 11 | 88 | TP |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Dukungan tata letak multi-kolom:
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 |