Als u een exact aantal kolommen nodig heeft bij het ontwerpen van een lay-out met meerdere kolommen, gebruikt u column-count.
.lead ( column-count: 3; )Gezien het aantal kolommen zal de browser de inhoud gelijkmatig verdelen over precies dat aantal kolommen.
Deze eigenschap kan ook worden gebruikt in de afkorting voor columnsen kan samen met column-width. Als beide eigenschappen zijn gedeclareerd column-countis het maximum aantal kolommen.
Waarden
column-countkan zijn autoof een geheel getal.
Gebruik autoals u ook gebruikt column-width. Zie het als een manier om de browser te vertellen dat column-widthhij het voortouw moet nemen.
Het gehele getal, ook wel het aantal kolommen genoemd, moet groter zijn dan of gelijk zijn aan 0.
In tegenstelling tot column-widthdeze eigenschap zal het aantal kolommen behouden, ongeacht de browserbreedte. Dit betekent dat als je een lay-out met 5 kolommen op je mobiele telefoon hebt geopend, je een zeer geplette lay-out met 5 kolommen hebt om te navigeren. column-countwerkt het beste naast column-width.
Browser-ondersteuning
Ondersteuning voor lay-out met meerdere kolommen:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | 3+ | 1.5+ | 11.1+ | 10+ | 81 | 3.2+ |
Vergeet uw voorvoegsels niet als u nog geen tool gebruikt die daarbij helpt.