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: auto;

/* Valeurs numériques */
/* Type <number> */
column-count: 3;

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

Valeur initialeauto
ApplicabilitéBlock containers except table wrapper boxes
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationun entier
Ordre canoniqueselon la grammaire

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

<integer> | 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.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

50

Oui -webkit-

Oui

Oui -webkit-

52

1.5 -moz-

10

11.10

15 -webkit-

3 -webkit-
On display: table-caption Oui Oui37 Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Oui50

Oui

Oui -webkit-

52

1 -moz-

Oui

Oui

Oui -webkit-

Oui

Oui -webkit-

On display: table-caption Oui ? Oui37 Oui Oui Oui

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
 Dernière mise à jour par : SphinxKnight,