Colonnes multiples CSS

Optional Advanced vient de couvrir les image sprites — une feuille, beaucoup de tuiles. Cette session est un autre outil optionnel : les colonnes multiples. Pensez à un journal, pas à une barre d’outils. Vous demandez à CSS de verser un long article dans deux ou trois filets verticaux. Vous ne placez pas des cartes indépendantes sur une Grid.

Réponse directe

Le layout multi-colonnes CSS découpe un bloc de contenu fluide — en général un long texte — en colonnes de journal. Vous fixez le nombre (column-count), une largeur confortable (column-width), la gouttière (column-gap) et éventuellement un filet vertical (column-rule). Texte, listes et contenu en ligne remplissent la première colonne, puis la suivante. Servez-vous-en pour du long copy. Pour la navigation, les paquets de cartes et la coquille de page, restez sur Flexbox ou Grid afin que chaque boîte reste une unité entière.

Pourquoi les colonnes existent

Les lignes trop longues se lisent mal. Les magazines ont résolu ça avec plusieurs colonnes plus courtes sur une page. CSS a repris l’idée pour le web : un élément, un flux de texte, un repli automatique en colonnes. Ce n’est pas Flexbox (une rangée ou colonne d’items) ni Grid (une carte bidimensionnelle de zones). Le multi-colonnes est un outil de fragmentation — le navigateur peut couper un paragraphe à la frontière de colonne si vous ne l’en empêchez pas.

Nombre : « je veux trois colonnes »

column-count demande un chiffre. Le navigateur partage la largeur du contenant entre ces colonnes (moins les gouttières) :

Sur un article large, vous voyez trois filets. Sur un téléphone étroit, trois colonnes maigres deviennent illisibles — couplez avec une media query, ou préférez column-width pour que le nombre baisse quand l’espace manque.

Largeur : « chaque colonne à peu près comme ça »

column-width est un indice, pas une cage de pixels. Le navigateur crée autant de colonnes d’au moins cette largeur que la place le permet :

Si la boîte fait ~48rem plus gouttières, vous verrez peut-être trois colonnes ; si elle rétrécit, deux puis une. C’est en général plus calme qu’un column-count: 3 figé sur chaque viewport. Vous pouvez poser les deux : le nombre est un maximum, la largeur un minimum confortable. Le raccourci columns est d’abord la largeur puis le nombre, par exemple columns: 16rem 3.

Gouttière et filet

Les colonnes ont besoin d’air. column-gap est la gouttière. column-rule trace une ligne fine dedans (épaisseur, style, couleur — comme une bordure, mais sans prendre d’espace de layout extra comme le bord d’une boîte) :

Il existe des raccourcis partiels (column-rule-width, column-rule-style, column-rule-color). Gardez le filet discret ; c’est un séparateur de journal, pas un second design system.

Un titre qui s’étend

Un titre doit souvent occuper toute la largeur, les colonnes commençant en dessous. column-span: all sur un enfant le fait :

Au quotidien on utilise none et all. Le span est pour un titre, une figure d’accroche ou un encadré — pas pour chaque paragraphe.

Empêcher les boîtes de se couper

Une carte, une figure avec légende ou une citation a l’air cassée si la coupure de colonne la tranche. break-inside: avoid demande au navigateur de garder cette boîte dans une colonne quand il le peut :

Utile aussi : break-before / break-after dans des flux type impression, et l’ancien page-break-inside: avoid en repli. Vous ne gagnerez pas chaque combat — les très hautes boîtes débordent encore — mais l’objectif habituel est que la légende reste avec l’image. column-fill: balance (souvent la valeur par défaut) égalise les hauteurs ; auto remplit d’abord la première colonne (plus proche d’un saut de journal).

Colonnes vs Flex vs Grid

Les modules Flexbox et Grid ont déjà enseigné le placement d’items. Le multi-colonnes ne donne pas justify-content ni d’aires nommées. Il fait fluer un flux. Si chaque enfant doit rester un rectangle cliquable, utilisez Flex ou Grid.

Le chrome de page reste Flex ou Grid

Ne transformez pas tout le site en column-count: 3. En-tête, nav et paquet de cartes veulent des boîtes entières :

.prose peut être multi-colonnes. .card-deck ne devrait pas. Mélanger les deux sur le même élément coupe les figures et pose les boutons dans le mauvais filet.

Écrans étroits et ordre de lecture

Si les colonnes seraient plus fines qu’une ligne confortable (environ 12–16rem de texte), passez à une colonne. Lecteurs d’écran et clavier suivent l’ordre du document, pas « descendre une colonne puis la suivante » comme un balayage visuel — correct pour un article, gênant si vous simulez un tableau de widgets sans lien. En RTL, les colonnes se remplissent selon le mode d’écriture ; le filet reste dans la gouttière.

Essayez vous-même

1. Enveloppez quelques paragraphes dans .prose avec column-count: 2 et un column-gap.
2. Passez à column-width: 16rem et redimensionnez la fenêtre — observez le nombre changer.
3. Ajoutez column-rule: 1px solid en gris calme.
4. Placez un <h2> avec column-span: all.
5. Enveloppez une figure dans break-inside: avoid. Puis appliquez le même CSS à une grille de cartes pour voir pourquoi Flex/Grid y est plus calme.

Erreurs fréquentes

• Utiliser le multi-colonnes comme galerie de cartes ou layout de page entière
• Forcer column-count: 3 sur téléphone jusqu’à trois mots par ligne
• Oublier column-gap et coller les filets
• Laisser images et légendes se couper à la frontière de colonne
• Traiter les colonnes comme Flex : pas de flex-grow pour un flux de colonnes
• Confondre avec les sprites — le sprite recadre un fond ; les colonnes fragmentent le texte

Résumé

• Le multi-colonnes verse un flux dans des colonnes de journal
• column-count est un nombre ; column-width un minimum confortable ; on peut combiner
• column-gap et column-rule habillent la gouttière ; titres avec column-span: all
• break-inside: avoid garde figures et encadrés entiers quand c’est possible
• Flex et Grid restent maîtres du chrome de page et des paquets de cartes
• Optional Advanced continue ensuite avec le masquage (masking)