Colonnes CSS

Dans l'exemple qui suit, on applique la propriété column-count sur l'élément qui possède la classe container. La valeur de la propriété column-count est 3, et le contenu est donc arrangé entre trois colonnes de tailles égales.

La disposition en colonnes est fortement liée aux média paginés pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification CSS Fragmentation sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes.

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns

• break-after
• break-before
• break-inside
• orphans
• widows

Concepts de base relatifs à la disposition en colonnes

Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes.

Mettre en forme les colonnes

Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes.

Équilibrer le remplissement des colonnes

Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies.

Gérer le dépassement

Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes.

Gérer la fragmentation du contenu en multi-colonnes

Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes.

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

• Les boîtes flexibles (flexbox)
• Les grilles CSS (CSS Grid)