Column-fill - Propriété CSS

Schéma de la syntaxe de column-fill.

Description de la propriété column-fill.

column-fill définit comment se fera la répartition du contenu entre les colonnes. La première solution est de passer à une colonne suivante lorsque la colonne actuelle est pleine, la dernière colonne pouvant alors être plus courte que les autres. La deuxième solution est d'équilibrer au mieux la hauteur de chacune des colonnes.

D'autres contraintes peuvent influer sur la hauteur des colonnes. Ce sont par exemples des sauts de colonne forcés avec les propriétés break-before et break-after.
Les propriétés widows et orphans qui évitent que des lignes de texte se retrouvent isolées en haut ou en bas d'une colonne, influencent également la taille des colonnes.

Valeurs pour column-fill.

• column-fill: balance;

  Valeur par défaut. Le navigateur répartit le contenu de façon le plus égale possible entre les colonnes.

  Les propriétés widows et orphans peuvent provoquer un léger décalage dans la longueur des colonnes.

  La mise en page sur plusieurs colonnes se justifie lorsque les caractères sont petits et/ou lorsque la largeur sur une seule colonne serait trop grande. L’œil du lecteur peut avoir du mal à suivre le texte d'un bout à l'autre des lignes, ce qui rend la lecture plus pénible.
  column-fill:balance;
• column-fill: auto;

  Le navigateur remplit les colonnes les unes à la suite des autres, en passant à une nouvelle colonne lorsque la colonne en cours est pleine. Cela suppose que la hauteur des colonnes soit fixée (height).
  Le remplissage des colonnes sera inégal et les dernières colonnes peuvent même être vides.

  La mise en page sur plusieurs colonnes se justifie lorsque les caractères sont petits et/ou lorsque la largeur sur une seule colonne serait trop grande. L’œil du lecteur peut avoir du mal à suivre le texte d'un bout à l'autre des lignes, ce qui rend la lecture plus pénible.
  column-fill:auto;
• column-fill: balance-all; ⚠

  Le navigateur répartit le contenu de façon le plus égale possible entre les colonnes. La différence avec la valeur précédente n'apparaît que dans une restitution fragmentée, comme une impression (fragmentation par pages).

  La mise en page sur plusieurs colonnes se justifie lorsque les caractères sont petits et/ou lorsque la largeur sur une seule colonne serait trop grande. L’œil du lecteur peut avoir du mal à suivre le texte d'un bout à l'autre des lignes, ce qui rend la lecture plus pénible.
  column-fill:balance-all;
• column-fill: initial; (balance) column-fill: inherit; column-fill: revert; column-fill: revert-layer; column-fill: revert-rule; column-fill: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, revert-rule, unset.

Exemple d'animation de column-fill.

L'animation de la propriété column-fill est possible mais d'un intérêt limité. De plus cela risque de générer des calculs assez lourds.

Exemples d'utilisation de la propriété column-fill.

La hauteur du bloc de démonstration a été fixée. le simulateur ne modifie que la propriété column-fill.

Compatibilité des navigateurs avec column-fill.

La propriété column-fill est bien reconnue par les navigateurs. La première colonne du tableau ci-dessous indique la prise en charge des mises en age multi-colonnes de façon générale. Il y a encore des incompatibilité mais qui ne concernent pas la propriété column-fill.

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.

1

Mise en page
multi colonnes

2

Propriété
column-fill

Estimation de la prise en charge globale.

18%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

1

QQ Browser

1

Baidu Browser

1

Safari

Safari sur IOS

Opéra

1

Chrome

1

Edge

1

Firefox

1

Chrome pour Androïd

1

Samsung Internet

1

Androïd Brower

1

Firefox pour Androïd

1

KaiOS Browser

1

Opéra mini

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

Caniuse

Caniuse

Histoire de la propriété column-fill.

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

  Cette spécification décrit la mise en page sur plusieurs colonnes. Il suffit de définir le nombre de colonnes sur le conteneur, et le contenu se disposera sur le nombre de colonnes indiqué. Bien entendu d'autres propriétés permettent d'agir plus finement sur les conteneur multi-colonnes.
  Cette spécification définit également des propriétés concernant l'espace entre les colonnes et le trait de séparation éventuel.

  Concernant column-fill Première description des mises en page sur plusieurs colonnes.
  Description des propriétés qui se rapportent au multi-colonnage, dont column-fill.
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

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

  Peu de nouveautés sur le niveau 2 de cette spécification. Notons simplement un pseudo-élément ::column qui permet de cibler les colonnes elles-mêmes (toutes les colonnes d'un seul coup). Il accepte peu de propriétés.

  Concernant column-fill Pas de nouveautés concernant la propriété column-fill.
  

  19 Décembre 2024

  Document de travail.

  

  

  

Voir aussi, à propos des mises en page en colonnes.

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

Propriétés :