column-count

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

Exemple interactif

Syntaxe

/* 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;

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 <integer>) 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;
  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.	Version de travail	Définition initiale.

Valeur initiale	`auto`
Applicabilité	Block containers except table wrapper boxes
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	un entier

Compatibilité des navigateurs

BCD tables only load in the browser