Si vous avez besoin d'un nombre exact de colonnes lors de la conception d'une mise en page à plusieurs colonnes, utilisez column-count.
.lead ( column-count: 3; )Compte tenu du nombre de colonnes, le navigateur distribuera uniformément le contenu dans exactement ce nombre de colonnes.
Cette propriété peut également être utilisée dans le raccourci pour columnset peut être utilisée en tandem avec column-width. Lorsque les deux propriétés sont déclarées, column-countle nombre maximum de colonnes est indiqué.
Valeurs
column-countpeut être autoou un entier.
À utiliser autosi vous utilisez également column-width. Pensez-y comme un moyen de dire au navigateur, de laisser column-widthprendre les devants.
L'entier, également appelé nombre de colonnes, doit être supérieur ou égal à 0.
Contrairement à column-widthcette propriété, le nombre de colonnes sera conservé quelle que soit la largeur du navigateur. Cela signifie que si vous avez sorti une mise en page à 5 colonnes sur votre téléphone mobile, vous aurez une mise en page à 5 colonnes très écrasée pour naviguer. column-countfonctionne mieux à côté column-width.
Prise en charge du navigateur
Prise en charge de la mise en page multi-colonnes:
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | 3+ | 1,5+ | 11.1+ | 10+ | 81 | 3.2+ |
N'oubliez pas vos préfixes si vous n'utilisez pas déjà un outil qui vous aide.