column-count

La propriété column-count décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.

/* Valeurs avec un mot-clé */
column-count: 3;
column-count: auto;

/* Valeurs globales */
column-count: inherit;
column-count: initial;
column-count: unset;

Valeur initiale	`auto`
Applicabilité	éléments non-remplacés de type `block` ou `table`, ou éléments de type `table-cell` ou `inline-block`
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Type d'animation	un entier
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

auto: Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de column-width).
<number>: Un nombre (type <number>) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur de column-width n'est pas auto, cette propriété indique simplement le nombre maximal de colonnes autorisé.

Syntaxe formelle

<number> | auto

Exemples

CSS

.exemple {
  border: 10px solid #000000;
  
  -moz-column-count:4;
  -webkit-column-count:4;
  column-count:3;

}

HTML

<p class="exemple">
  « Mais alors, » pensa Alice, « ne serai-je donc
  jamais plus vieille que je ne le suis maintenant ?
  D’un côté cela aura ses avantages, ne jamais être
  une vieille femme. Mais alors avoir toujours des
  leçons à apprendre ! Oh, je n’aimerais pas cela du
  tout. »
  « Oh ! Alice, petite folle, » se répondit-elle. 
  « Comment pourriez-vous apprendre des leçons ici ?
  Il y a à peine de la place pour vous, et il n’y en
  a pas du tout pour vos livres de leçons. »
</p>

Résultat

Spécifications

Spécification	État	Commentaires
CSS Multi-column Layout Module La définition de 'column-count' dans cette spécification.	Candidat au statut de recommandation	Définition initiale.

Fonctionnalité	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	(Oui)-webkit 50.0^[1]	(Oui)-webkit (Oui)	1.5 (1.8)-moz 52 (52)^[2]	10	11.10	3.0 (522)-webkit
Sur `display:` `table-caption`	(Oui)	(Oui)	37 (37)	(Oui)	(Oui)	(Oui)

Fonctionnalité	Android	Webview Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome pour Android
Support simple	(Oui)	(Oui) 50.0^[1]	(Oui)-webkit (Oui)	1.0 (1.8)-moz 52.0 (52)^[2]	(Oui)	(Oui)	(Oui)	? 50.0^[1]
Sur `display:` `table-caption`	(Oui)	?	(Oui)	37.0 (37)	(Oui)	(Oui)	(Oui)	?

[1] Non-préfixée à partir de Chrome 50.

[2] Non-préfixée à partir de Gecko 52, les synonymes préfixés sont toujours disponibles.