Jeśli potrzebujesz dokładnej liczby kolumn podczas projektowania układu wielokolumnowego, użyj column-count.
.lead ( column-count: 3; )Biorąc pod uwagę liczbę kolumn, przeglądarka równomiernie rozdzieli zawartość w dokładnie takiej liczbie kolumn.
Ta właściwość może być również używana w skrócie columnsi może być używana w połączeniu z column-width. Gdy obie właściwości są zadeklarowane, column-countjest to maksymalna liczba kolumn.
Wartości
column-countmoże być autolub liczbą całkowitą.
Użyj, autojeśli używasz również column-width. Potraktuj to jako sposób na powiedzenie przeglądarce, aby przejęła column-widthinicjatywę.
Liczba całkowita, nazywana również liczbą kolumn, musi być większa lub równa 0.
W przeciwieństwie do column-widthtej właściwości będzie przechowywać liczbę kolumn niezależnie od szerokości przeglądarki. Oznacza to, że jeśli w telefonie komórkowym pojawi się układ pięciokolumnowy, do nawigacji będzie używany bardzo spłaszczony układ pięciokolumnowy. column-countdziała najlepiej razem column-width.
Wsparcie przeglądarki
Obsługa układu wielokolumnowego:
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | 3+ | 1.5+ | 11.1+ | 10+ | 81 | 3.2+ |
Nie zapomnij o przedrostkach, jeśli nie używasz już narzędzia, które pomaga w tym.