Om du behöver ett exakt antal kolumner när du utformar en layout med flera kolumner, använd column-count.
.lead ( column-count: 3; )Med tanke på antalet kolumner kommer webbläsaren att fördela innehållet jämnt i exakt det antalet kolumner.
Den här egenskapen kan också användas i stenografi för columnsoch kan användas tillsammans med column-width. När båda egenskaperna deklareras column-countär det maximala antalet kolumner.
Värden
column-countkan vara autoeller ett heltal.
Använd autoom du också använder column-width. Tänk på det som ett sätt att berätta för webbläsaren att låta column-widthta ledningen.
Heltalet, även känt som antalet kolumner, måste vara större än eller lika med 0.
Till skillnad från den column-widthhär egenskapen kommer antalet kolumner att innehålla oavsett webbläsarens bredd. Det betyder att om du tog upp en 5-kolumnad layout på din mobiltelefon, kommer du att ha en mycket snygg 5-kolumnad layout att navigera. column-countfungerar bäst bredvid column-width.
Webbläsarstöd
Stöd för flera kolumner:
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Några | 3+ | 1,5+ | 11.1+ | 10+ | 81 | 3.2+ |
Glöm inte dina prefix om du inte använder ett verktyg som redan hjälper till med det.