Column-fill - Propriété CSS

column-fill

Résumé des caractéristiques de la propriété column-fill

Description rapide
Gère la répartition du contenu entre les colonnes.
Statut
Standard
S'applique à
Conteneurs colonnes multiples.
Utilisable sur
HTML
Valeurs prédéfinies
balance | auto | balance-all
Pourcentages
Ne s'appliquent pas.
Valeur initiale
balance
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété column-fill passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page multi-colonnes
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de column-fill.

column-fill - Syntax DiagramSyntax diagram of the column-fill CSS property. See stylescss.free.fr for details. auto auto balance balance balance-all balance-allcolumn-fill:;column-fill:;
Schéma syntaxique de la propriété column-fill.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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

  • column-fill: balance;

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

  • 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).

  • column-fill: initial; (balance) column-fill: inherit; column-fill: revert; column-fill: revertLayer; column-fill: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, 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.

La répartition du contenu entre ces deux colonnes (balance) est géré par la propriété column-fill. Pour les besoins de la démonstration, celle-ci a été animée. Afin de ne pas gêner l'équilibrage des colonnes, les propriétés orphans et widows ont été fixées à leur valeur minimale, c'est à dire 1.
Vous pouvez consulter le CSS de l'animation, ainsi que les règles appliquées à cet élément en cliquant sur le bouton ci-dessus.

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.

column-fill :
Extrait du livre de Daniel Glazman - "CSS2, des feuilles de styles pour le Web", décembre 1998 : « Netscape retarde considérablement le développement des feuilles de styles sur le web en diffusant en 1996 ses extensions propriétaires d’HTML ; elles offrent la gestion de la couleur, de la fonte ou même du clignotement (…) Netscape prône la simplicité : les rédacteurs de documents HTML maîtrisent ce format car il est simple ; il suffit donc d’intégrer aux documents de nouveaux éléments HTML simples gérant la présentation. »

Compatibilité des navigateurs avec column-fill.

Colonne 1
Support des mises en page en colonnes, y compris la gestion des sauts de colonnes.
Colonne 2
Support de la propriété column-fill pour définir à quel moment on passe à la colonne suivante.

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-fill
Estimation de la prise en charge globale.
18%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

2

QQ Browser

2

Opéra Mobile

2

Firefox

2

Chrome

2

Safari

Edge

2

Opéra

2

Chrome pour Androïd

2

Safari sur IOS

Samsung Internet

2

UC Browser pour Androïd

2

Androïd Brower

2

Firefox pour Androïd

2

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-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.
    WD
    23 Juin 1999
    Document de travail.
    CR
    17 Décembre 2009
    Candidat à la recommandation.
    PR
    REC

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 :

column-count
Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
Column-fill
Gère la répartition du contenu entre les colonnes.
⚠
column-height
Définit la hauteur des colonnes, dans le cas d'une mise en page sur plusieurs colonnes. Celle-ci peut être inférieure à la hauteur du conteneur, on obtient alors une sorte de tableau.
column-rule
Propriété résumé définissant tous les paramètres du trait de séparation entre les colonnes.
column-rule-color
Définit la couleur des filets de séparation de colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur grille ou d'un conteneur flex.
column-rule-style
Choisit le type de trait pour les filets séparant les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.
column-rule-width
Définit l'épaisseur du filet de séparation entre les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.
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.