Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété column-count

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 Object 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 Object 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 gestion plus responsive des colonnes (auto-adaptation à la taille de l'écran), reportez-vous aux explications de la page columns.

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

  • column-count: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

column-count :
Le CSS est un langage informatique purement déclaratif. Autrement dit, il ne possède pas les structures algorithmiques habituelles telles que des boucles. Néanmoins, la notion de test, classiquement traduite pas l'instruction if dans les langages classiques, commence à apparaître en CSS par le biais de directives telles que @media ou @supports. Les variables font également leur apparition en CSS sous le nom de propriétés personnalisées.

Voir aussi...

Colonnes multiples - Propriétés.

  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • column-fill : Gère la répartition du contenu entre les colonnes.
  • column-gap : Définit l'espacement entre les colonnes.
  • column-rule : Définit tous les paramètres du trait de séparation entre les colonnes.
  • column-rule-color : Définit la couleur des lignes de séparation de colonnes.
  • column-rule-style : Choisit le type de trait pour la séparation des colonnes.
  • column-rule-width : Définit l'épaisseur du trait de séparation entre les colonnes.
  • column-span : Gère le chevauchement du contenu sur plusieurs colonnes.
  • column-width : Définit la largeur des colonnes.
  • columns : Définit les caractéristiques d'une mise en page sur plusieurs colonnes.
  • orphans : Gestion des coupures en bas de page.
  • widows : Gestion des ruptures en haut de page.