Hvis du har brug for et nøjagtigt antal kolonner, når du designer et layout med flere kolonner, skal du bruge column-count.
.lead ( column-count: 3; )I betragtning af antallet af kolonner distribuerer browseren jævnt indholdet i nøjagtigt det antal kolonner.
Denne egenskab kan også bruges i stenografi til columnsog kan bruges sammen med column-width. Når begge egenskaber erklæres, column-counter det maksimale antal kolonner.
Værdier
column-countkan være autoeller et heltal.
Brug, autohvis du også bruger column-width. Tænk på det som en måde at fortælle browseren at lade gå column-widthforan.
Heltallet, også kendt som antallet af kolonner, skal være større end eller lig med 0.
I modsætning til column-widthdenne egenskab vil antallet af kolonner indeholde uanset browserbredden. Dette betyder, at hvis du trak et 5-søjlet layout op på din mobiltelefon, har du et meget skævt 5-søjlet layout til at navigere. column-countfungerer bedst ved siden af column-width.
Browsersupport
Understøttelse af layout med flere søjler:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nogen | 3+ | 1,5+ | 11.1+ | 10+ | 81 | 3.2+ |
Glem ikke dine præfikser, hvis du ikke bruger et værktøj, der allerede hjælper med det.