Lorsque vous souhaitez conserver vos colonnes à une largeur spécifique, utilisez column-width
.
section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )
Le navigateur calculera le nombre de colonnes d'au moins cette largeur pouvant tenir dans l'espace. Pensez column-width
à une suggestion de largeur minimale pour le navigateur.
column-width
est une propriété flexible. Une fois que le navigateur ne peut pas contenir au moins 2 colonnes à la largeur spécifiée, les colonnes s'arrêteront et tomberont dans une seule colonne.
Cette propriété est également utilisée dans le raccourci pour columns
et peut être utilisée en tandem avec column-count
. Lorsque les deux propriétés sont déclarées, column-count
le nombre maximum de colonnes est indiqué.
Valeurs
Vous pouvez régler column-width
à auto
ou une longueur.
À utiliser auto
si vous utilisez également column-count
ou si vous devez désactiver la propriété. Pensez-y comme un moyen de dire au navigateur de laisser column-count
prendre les devants.
Pour spécifier la largeur des colonnes, utilisez une longueur supérieure (ou égale à) 0. Vous pouvez utiliser n'importe quelle unité CSS à l'exception du pourcentage.
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+ | 2.3+ | 6.1+ |
N'oubliez pas vos préfixes!