Columns - Propriété CSS

Schéma syntaxique de columns.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length est une valeur numérique, positive, suivie d'une des unités de dimension.
• integer est un nombre entier sans unité. il doit être égal ou supérieur à 1.

Description de la propriété columns.

La propriété CSS columns permet de mettre en œuvre, de façon très simple, une mise en page en colonnes : elle définit la largeur minimale et le nombre maximal de colonnes. Cette propriété est donc un raccourci pour les deux propriétés CSS suivantes :

• column-width : largeur des colonnes.
• column-count : nombre de colonnes.

La propriété columns répartit le contenu de l'élément sur le nombre de colonnes indiqué. La répartition se fait par défaut pour équilibrer au mieux la hauteur des colonnes. Si toutefois cela conduit à des colonnes moins larges que la largeur indiquée, le navigateur réduit automatiquement le nombre de colonnes. On peut donc très simplement créer des mises en page qui s'adaptent à la taille de l'écran (sensitive) est sans faire appel aux media-queries.

Valeurs pour columns.

• columns: auto;

  Valeur par défaut. Le navigateur affiche le contenu sur une seule colonne.

• columns: 200px;

  Les colonnes auront une largeur minimale correspondant à la valeur indiquée. Toutefois, si la place disponible le permet, le navigateur peut afficher des colonnes plus larges.

  La valeur doit être un nombre positif et suive d'une unité de dimension (voir les unités de dimension). Les pourcentages ne sont pas autorisés.

• columns: 3;

  Sans contraintes supplémentaires, le navigateur affichera l'élément sur le nombre de colonnes indiqué.
  La valeur doit être un nombre positif sans unité.

• columns: 200px 3;

  Lorsque deux valeurs sont indiquées, la première doit être une dimension et correspond à la largeur minimale des colonnes. En fonction de la place disponible et du nombre de colonnes demandé, les colonnes peuvent être plus larges.

  La deuxième valeur est un nombre entier sans unité qui indique le nombre maximum de colonnes, mais, en fonction de la place disponible et de la largeur demandée, le navigateur peut en afficher moins.

• columns: initial; (auto) columns: inherit; columns: revert; columns: revertLayer; columns: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Généralités sur la mise en page en colonnes.

Le colonage, ou mise en page en colonnes, consiste à répartir le contenu d'un élément sur plusieurs colonnes. La répartition de ce contenu entre les colonnes étant automatique, et visant en général, à équilibrer la hauteur des colonnes.

L'image ci-dessous montre à quoi va ressembler un bloc de texte disposé en colonnes. Il s'agit bien d'un seul élément et non pas de trois éléments qui auraient été disposés côte à côte, comme ce serait le cas avec des éléments flottants, un flex-box ou une grille.

Cet exemple fait bien apparaître les constituants d'un présentation en colonnes :

• La largeur des colonnes, définies par la propriété column-width. Toutes les colonnes ont la même largeur.
• L'espace entre les colonnes, dénommé gap en anglais ou gouttière en français, est ajusté par la propriété column-gap.
• Un trait de séparation éventuel entre les colonnes, dénommé rule en anglais. Il est défini par la propriété résumée column-rule ou les propriétés individuelles correspondantes : column-rule-color, column-rule-style, etc.

Sauts de colonne.

Par défaut le navigateur tente de répartir le texte de la façon la plus égale possible entre les colonnes. Celles-ci doivent donc avoir à peu près toutes la même longueur. Il est toutefois possible de gérer l'équilibrage des colonnes avec la propriété column-fill.

Il est également possible de positionner manuellement les sauts de colonne avec les propriétés break-before ou break-after.

Chevauchements.

Il faut connaître aussi la propriété column-span qui permet à un élément interne de s'étendre sur l'ensemble des colonnes (par exemple un titre ou une image).

Titre chevauchant toutes les colonnes

Coactique aliquotiens nostri pedites ad eos perse quendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices vene rint summos, inter arta tamen et invia nullas acies explicare permissi nec fir­mare nisu valido gressus: hoste discur­satore rupium abscisa volvente, ruinis ponderum inmanium conster nuntur, aut ex neces­sitate ultima fortiter dimicante, superati peri­cu­lose per prona discedunt.

Sens d'écriture.

La disposition et l'orientation des colonnes sont bien entendu influencées par le sens d'écriture (langues CJK, arabes...).

writing-mode : horizontal-tb vertical-rl vertical-lr

Débordements.

Lorsqu'un élément a une largeur définie plus grande que la largeur de la colonne, il déborde sur la ou les colonnes voisines. Pour éviter cela on peut définir la largeur maximale de cet élément à 100%.

Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum. Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum in manium conster nuntur, aut ex necessitate ultima fortiter dimicante, superati peri­cu­lose per prona discedunt. Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspi raret, solisque scholis iussit esse contentum palatinis et protec torum cum.

Animation de la propriété columns.

Reportez vous aux propriétés individuelles pour des exemples d'animation. Mais il est rare d'animer les propriétés relatives à la mise en page en colonnes.

Simulateur avec la propriété columns.

Choisissez les deux paramètres pour columns (largeur de colonne minimal et nombre de colonnes maximal). Vous pouvez ensuite ajuster la largeur de la fenêtre de votre navigateur pour voir évoluer la largeur et le nombre de colonnes.

Prise en charge de columns par les navigateurs.

La mise en page sur plusieurs colonnes est relativement bien prise en charge par les navigateurs actuels, bien que certaines fonctionnalités posent encore des problèmes (ce qui explique que la première colonne du tableau ci-dessous ne soit pas entièrement verte). Mais la propriété columns est bien reconnue.

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é
columns

Estimation de la prise en charge globale.

18%

95%

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

Historique de la propriété columns.

La spécification concernant les mises en page multi-colonnes n'a pas beaucoup évolué depuis sa création.

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

  Introduction des mises en page multi-colonnes, et de la propriété columns.
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

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

  Pas de modifications concernant la propriété columns.
  

  19 Décembre 2024

  Document de travail.

  

  

  

Autres propriétés dans le même module de standardisation que columns.

La spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes) décrit tout ce qui concerne les mises en page multi-colonnes. La propriété columns est donc référencée dans ce module, ainsi que les termes ci-dessous :

Propriétés :