Propriété CSS column-count

La propriété column-count spécifie le nombre de colonnes dans lesquelles le contenu d'un élément sera divisé. Elle fait partie du module CSS de disposition multi-colonnes, qui permet à un seul bloc de contenu de se répartir automatiquement sur plusieurs colonnes — comme dans un journal ou un magazine — sans avoir à découper le balisage à la main.

Cette page explique ce que fait column-count, sa syntaxe et les valeurs acceptées, des exemples interactifs, son fonctionnement avec les autres propriétés de colonnes, et les pièges à éviter.

Ce que fait `column-count`

column-count accepte un entier positif ou le mot-clé auto. auto est la valeur par défaut.

Lorsqu'elle est définie avec une valeur numérique (par exemple 3), le navigateur tente de diviser le contenu en exactement ce nombre de colonnes de largeur égale.
Lorsqu'elle est définie sur auto, le nombre de colonnes est déterminé par d'autres propriétés — principalement column-width. Si ni column-count ni column-width n'est défini, le contenu est rendu en une seule colonne.

Si vous définissez à la fois column-count et column-width, column-count agit comme un maximum : le navigateur crée autant de colonnes d'au moins column-width que possible, mais jamais plus que column-count. Cette combinaison est le modèle responsive recommandé, et le raccourci columns définit les deux à la fois.

Quand l'utiliser ?

La disposition multi-colonnes est particulièrement adaptée aux longs passages de texte continu, à lire dans l'ordre — articles, pages de conditions d'utilisation, listes de liens — où vous souhaitez que le contenu remplisse la largeur disponible en colonnes équilibrées. Ce n'est pas une grille à usage général : pour les mises en page bidimensionnelles, utilisez plutôt CSS Grid ou Flexbox.

Valeur initiale	auto
S'applique à	Les conteneurs de blocs, à l'exception des boîtes englobantes des tableaux.
Héritage	Non.
Animatable	Oui. Le nombre de colonnes est animatable.
Version	CSS3
Syntaxe DOM	object.style.columnCount = "4";

Syntaxe

Syntaxe de la propriété column-count

column-count: <integer> | auto | initial | inherit;

Exemple de la propriété column-count :

Exemple de la propriété CSS column-count avec la valeur auto

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: auto;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété column-count avec une valeur numérique :

Exemple de la propriété CSS column-count avec une valeur numérique

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 7;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a great fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </div>
  </body>
</html>

Essayez vous-même »

Avec column-count: 7, le navigateur divise le même paragraphe en sept colonnes. Si le conteneur est trop étroit pour donner à chaque colonne une largeur utilisable, les colonnes deviennent très fines — c'est précisément pourquoi combiner column-count avec column-width (ou le raccourci columns) est généralement un meilleur choix qu'un nombre fixe.

Utilisation avec les autres propriétés de colonnes

column-count est rarement utilisée seule. Ces propriétés complémentaires façonnent les colonnes obtenues :

Propriété	Ce qu'elle contrôle
`column-width`	La largeur idéale de chaque colonne. Combinée à `column-count`, elle limite le nombre de colonnes à un maximum.
`column-gap`	L'espace entre les colonnes.
`column-rule`	Une ligne tracée entre les colonnes (comme une `border`, mais dans l'espace entre les colonnes).
`columns`	Raccourci pour définir `column-width` et `column-count` ensemble.
`column-span`	Permet à un élément (comme un titre) de s'étendre sur toutes les colonnes.
`column-fill`	Indique si le contenu est réparti de façon équilibrée entre les colonnes ou remplit chaque colonne successivement.

Une recette courante et robuste consiste à définir simultanément une largeur cible et un nombre maximum de colonnes :

.article {
  column-width: 14rem;   /* aim for ~14rem-wide columns */
  column-count: 3;       /* but never more than 3 */
  column-gap: 2rem;
}

Pièges à éviter

Nombres entiers uniquement. column-count n'accepte pas les fractions ni les unités — 2.5 et 200px sont invalides. Utilisez column-width si vous souhaitez raisonner en termes de largeur.
C'est un maximum, pas une garantie. Lorsque column-width est également définie, le navigateur peut afficher moins de colonnes que column-count si l'espace est insuffisant.
Le contenu peut être coupé entre les colonnes. Utilisez la propriété break-inside (break-inside: avoid) pour éviter que des éléments comme des figures ou des éléments de liste soient divisés en deux à la limite d'une colonne.
Animatable mais rarement animée. La valeur peut être en transition, mais le redistribution du texte sur un nombre différent de colonnes est visuellement perturbante, donc rarement utilisée dans les animations.

La propriété column-count est prise en charge par tous les navigateurs modernes. Internet Explorer 10–11 et les anciennes versions de Safari nécessitaient les préfixes -ms- / -webkit- ; aujourd'hui, la propriété sans préfixe peut être utilisée en toute sécurité.

Valeurs

Valeur	Description	Essayer
auto	Le nombre de colonnes est déterminé par d'autres propriétés. C'est la valeur par défaut de cette propriété.	Essayer »
`<integer>`	Spécifie le nombre exact de colonnes dans lesquelles le contenu doit être réparti.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite de la propriété de son élément parent.

Exercice

Pratique

Que fait la propriété CSS 'column-count' ?

Elle définit le nombre de colonnes dans une disposition multi-colonnes.Elle définit l'espace entre les colonnes dans la disposition.Elle définit la couleur des colonnes dans la disposition.Elle définit la largeur des colonnes dans la disposition.Elle contrôle le débordement du contenu hors de son conteneur.

Ce que fait column-count