MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Les colonnes CSS forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes.

Les bases  la disposition multi-colonnes

Les trois propriétés clés utilisées pour organiser une disposition en colonnes sont column-count, column-width et  column-gap. D'autres propriétés peuvent également intervenir pour l'organisation et l'affichage.

Suggérer le nombre de colonnes et leurs largeurs

Les deux premières propriétés column-count et column-width sont parfois source de confusion :

  • La propriété column-count définit le nombre maximal de colonnes utilisé pour afficher le texte. Le navigateur analysera l'espace disponible, prendra en compte la valeur de column-width et celle de column-gap puis dessinera le maximum de colonnes possibles dans l'espace disponible.
  • La propriété column-width indique une largeur minimale de colonne avec une valeur length. Chaque colonne créée par le navigateur devra être au moins aussi large (elle pourra être plus large). Une fois déterminé le nombre de colonnes, l'espace restant sera réparti entre les colonnes et ajouté.

D'une certaine façon, ces propriétés agissent plus comme des recommandations plutôt que comme des règles strictes. Cela permet au navigateur de gérer l'affichage lorsque la largeur de l'écran varie. Lorsque la taille de l'écran se réduit, le navigateur réduira le nombre de colonnes créées et ajustera l'espace entre les colonnes restantes.

Il est également possible de contrôler l'espace (parfois appelé la « gouttière ») entre les colonnes. Cet espace est paramétré grâce à la propriété column-gap. Par convention, l'espace par défaut mesure 1em mais vous pouvez l'indiquer de façon explicite si besoin. Contrairement aux deux propriétés précédentes, cet espace n'est pas ajusté lorsque la taille de l'affichage varie.

La gestion du retour à la ligne

La propriété column-fill permet de régler la façon dont le navigateur remplit chacune des colonnes. Par défaut, le navigateur crée autant de colonnes que possible puis répartit le contenu de façon égale entre chaque colonne. Si on préfère que le navigateur remplisse les colonnes au fur et à mesure, on pourra utiliser column-fill avec la valeur auto (la valeur par défaut est balance).

S'il n'y a pas de contrainte sur la taille des colonnes, cela aboutira à la création d'une seule colonne. Aussi, assurez-vous de contraindre la hauteur des colonnes dans un conteneur avec height ou max-height pour utiliser cette propriété au mieux.

Note : Bien que la spécification CSS définisse les propriétés break-before, break-after et break-inside afin de contrôler les retours à la lignes au sein de régions, colonnes ou limites de page, ces propriétés ne sont pas suffisamment implémentées pour pouvoir être utiliséees actuellement.

L'apparence des colonnes

Il est possible de dessiner une ligne entre chaque colonne (au milieu de la gouttière) grâce aux propriétés column-rule-style, column-rule-width, column-rule-color ou grâce à la propriété raccourcie column-rule.

Référence

Propriétés

Guides

Utiliser une disposition multi-colonnes en CSS
Un tutoriel pas-à-pas pour construire des dispositions sur plusieurs colonnes.

Spécifications

Spécification État Commentaires
CSS Multi-column Layout Module Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui) -webkit

9 (9)-moz52 (52)

10 11.10
15-webkit
3.0 (522)-webkit
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 2.1-webkit 22.0 (22)-moz
52.0 (52)
10 11.5
32-webkit
3.2-webkit

Voir aussi

Les autres modules liées aux dispositions possibles en CSS :

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz
 Dernière mise à jour par : SphinxKnight,