Column-count - Propriété CSS

Schéma de la syntaxe de column-count.

Description des termes utilisés sur le schéma :

• integer est un nombre entier égal ou supérieur à 1.

Description de la propriété column-count.

column-count définit le nombre de colonnes, dans le cadre d'une mise en page sur plusieurs colonnes. Cette propriété fonctionne en coordination avec la largeur des colonnes (voir column-width) :

• Si column-width n'est pas définie ou a la valeur auto, le nombre de colonnes est exactement celui qui est défini par column-count.
• Si la valeur de column-width est définie, column-count indique alors le nombre de colonnes maximal. Le nombre de colonnes peut donc être plus petit pour permettre leur affichage dans la largeur demandée.

Si des sauts de colonnes forcés existent dans le contenu de l'élément, ils peuvent provoquer la création de plus de colonnes que ce qui est prévu par column-count. Rappel : les sauts de colonnes forcés sont définis par les propriétés break-before et break-after.

Pour une présentation générale des mises en page en colonnes, reportez-vous aux explications sur la page de la propriété columns.

Valeurs pour column-count.

• column-count: auto;

  Valeur par défaut. Le nombre de colonnes est déterminé à partir de la largeur des colonnes (voir column-width). Si cette dernière n'est pas définie, le nombre de colonnes est égal à 1.

• column-count: 3;

  Un nombre sans unité, supérieur à zéro.

Valeurs communes à toutes les propriétés :

Animation du nombre de colonnes.

La propriété column-count peut être animée de façon progressive. Mais comme le nombre de colonnes ne peut être qu'un nombre entier, l'animation sera forcément saccadée.

Accéder à la propriété column-count par programme.

Modifier le nombre de colonnes en Javascript.

Javascript accepte au moins deux syntaxes pour modifier la valeur d'une propriété. La première, avec le nom de la propriété écrit en kebab-case (un tiret pour séparer les mots), et la deuxième avec la notation camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['column-count'] = '2'; // ou let el = document.getElementById('id'); el.style.columnCount = '2';

Lire en Javascript le nombre de colonnes.

L'exemple de code ci-dessous récupère la valeur de column-count si celle-ci a été affectée dans le code HTML, via l'attribut style de l'élément. Les valeurs définies via un sélecteur CSS ne sont pas prises en compte.

let el = document.getElementById('id'); let value = el.style['column-count']; // ou let el = document.getElementById('id'); let value = el.style.columnCount;

Lire la valeur calculée de column-count en Javascript.

La valeur calculée est, soit une valeur affectée directement sur l'élément via un sélecteur CSS ou l'attribut style, soit une valeur héritée, soit encore la valeur initiale de la propriété (auto dans le cas de column-count).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('column-count');

Modifier le nombre de colonnes avec JQuery.

JQuery accepte également deux écritures pour le nom de la propriété : en kebab-case ou en camel-case.


$('#id').css('column-count', '2');
// ou
$('#id').css('columnCount', '2');


Lire la valeur calculée de la propriété column-count avec JQuery.

let value = $('#id').css('column-count');

Autres exemples de code.

Si ces codes ne vous suffisent pas, voyez d'autres exemples sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété column-count et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée.

Exemple interactif.

Compatibilité des navigateurs avec column-count.

Remarques :

(1) Ne supporte pas les valeurs avoid (dans le contexte d'une mise en page multi-colonnes), avoid-column et avoid-page pour les propriétés beak-after, break-before et break-inside.

(2) Ne supporte pas les valeurs break-after, break-before et break-inside.

1

Mise en page
multi colonnes

2

Propriété
column-count

Estimation de la prise en charge globale.

18%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

1

QQ Browser

1

Opéra Mobile

1

Firefox

1

Chrome

1

Safari

Edge

1

Opéra

1

Chrome pour Androïd

1

Safari sur IOS

Samsung Internet

1

UC Browser pour Androïd

1

Androïd Brower

1

Firefox pour Androïd

1

KaiOS Browser

2

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété column-count.

• Module CSS - Mise en page multi-colonnes - Niveau 1

  Introduction des mises en page sur plusieurs colonnes, et des propriétés qui s'y rapportent, comme column-count.
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page multi-colonnes - Niveau 2

  Pas de modification de la propriété column-count si ce n'est que les valeurs 0 sont maintenant interdites.
  

  19 Décembre 2024

  Document de travail.

  

  

  

Autres propriétés relatives au multi-colonage.

Les mises en page multi-colonnes sont décrites dans la spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes). La propriété column-count est expliquée dans ce module. Vous y trouverez également la référence des termes ci-dessous :

Propriétés :