Générateur CSS multi-colonnes, gratuit

Ce qu'est la mise en colonnes CSS

Le module CSS Multi-column Layout (la spécification W3C « CSS Multi-column Layout Module Level 1 ») redistribue automatiquement le contenu d'un même élément sur deux colonnes ou plus, comme l'imprimerie des journaux et magazines traite les textes longs depuis des siècles. Vous déclarez combien de colonnes vous voulez (ou la largeur souhaitée de chaque colonne) et le navigateur répartit le contenu de haut en bas, de gauche à droite, en équilibrant le nombre de lignes pour que chaque colonne se termine à peu près à la même hauteur. Le module est devenu Candidate Recommendation du W3C en avril 2011 et s'est déployé de manière utilisable dans les navigateurs entre Firefox 3.5 (juin 2009) et IE 10 (octobre 2012). C'est une fonctionnalité de plate-forme web établie depuis plus d'une décennie. Contrairement à Flexbox ou Grid (qui alignent des enfants distincts sur des positions connues) la mise en colonnes traite le contenu comme un flux continu unique que le navigateur découpe en colonnes en fonction de la hauteur disponible.

Quand les colonnes CSS sont le bon outil

• Articles longs sur grand écran. Lire un texte sur une seule colonne de plus de 75 caractères fatigue l'œil, le regard doit parcourir trop de distance pour retrouver le début de la ligne suivante. La mise sur deux colonnes divise par deux la longueur de ligne tout en utilisant le même espace vertical, et améliore radicalement la lisibilité sur les écrans larges.
• Listes de définitions et glossaires. Les longues listes alphabétiques d'éléments courts s'enroulent naturellement sur plusieurs colonnes sans qu'on ait à les équilibrer à la main.
• Listes de liens en pied de page. Le classique pied de page « plan du site » avec des dizaines de liens (catégories en colonne, liens en travers) convient parfaitement à column-count.
• Listes de fonctionnalités et énumérations à puces. Une longue liste qui défilerait sans fin sur une seule colonne se lit bien mieux sur deux ou trois.
• Feuilles de style d'impression. La mise en colonnes est l'une des rares fonctionnalités CSS qui se traduit magnifiquement à l'impression, le format même que les journaux utilisent depuis leur invention.

column-count vs column-width, la distinction la plus importante

Deux façons de spécifier les colonnes, et le choix compte pour le responsive. column-count: 3 code en dur trois colonnes, quelle que soit la largeur de la fenêtre, le navigateur produit exactement trois colonnes qui rétrécissent à mesure que le conteneur se resserre. Sur un téléphone, trois colonnes deviennent d'illisibles fines bandes. column-width: 250px demande au contraire des colonnes « d'au moins 250 pixels de large » ; le navigateur calcule combien tiennent dans le conteneur et redistribue automatiquement quand la fenêtre change. Les grands écrans obtiennent beaucoup de colonnes, les petits une seule ou peu, sans la moindre media query. Le motif combiné est la bonne pratique moderne : columns: 250px 4 (raccourci pour column-width plus column-count) signifie « colonnes de 250 px de large, mais jamais plus de 4 ». Le navigateur produit 4 colonnes sur un grand bureau, moins sur une tablette, une seule sur un téléphone, automatiquement responsive. La plupart du CSS de production utilise cette forme combinée pour sa robustesse.

Contrôler où le contenu se coupe

Par défaut, le navigateur coupe les colonnes là où il en arrive, ce qui sépare parfois un titre de son premier paragraphe ou coupe une carte en deux. La propriété CSS break-inside: avoid (CSS Fragmentation Module Level 3) dit au navigateur « ne sépare pas cet élément entre colonnes », typiquement appliquée aux cartes, figures et tout contenu qui doit rester groupé. break-before: column force une coupe de colonne avant un élément, utile pour « commencer chaque section dans une nouvelle colonne ». column-span: all fait qu'un titre ou un encadré s'étend sur toute la largeur, en sortant du flux des colonnes, typique pour le titre d'article au-dessus d'un corps en colonnes.

Pièges à surveiller

La mise en colonnes a des interactions subtiles qu'il vaut mieux connaître. L'ordre de lecture des lecteurs d'écran suit l'ordre du DOM, qui correspond généralement à l'ordre visuel haut-en-bas des colonnes, mais les technologies d'assistance peuvent parfois s'embrouiller sur des mises en page complexes. La pagination à l'impression avec multi-colonnes peut produire des équilibrages étranges entre les sauts de page ; testez avec une feuille de style d'impression si la sortie papier vous importe. Le contenu long se remplit vers le bas: si vous donnez à un conteneur multi-colonnes une hauteur fixe inférieure à ce que le contenu demande, il déborde ; si vous ne contraignez pas la hauteur, le navigateur équilibre les colonnes à des hauteurs à peu près égales. Le contenu ancré (formulaires, éléments interactifs qui doivent rester en place) fonctionne mal en colonnes parce que l'utilisateur ne sait pas où regarder. Mélanger avec Grid ou Flexbox au même niveau produit des résultats imprévisibles, choisissez une seule méthode de mise en page par conteneur.

Propriétés CSS générées

• column-count: nombre explicite de colonnes (fixe, ne s'adapte pas à la fenêtre)
• column-width: largeur minimale d'une colonne (le navigateur calcule combien tiennent, entièrement responsive)
• column-gap: espace horizontal entre colonnes ; la valeur par défaut de 1em convient en général
• column-rule: ligne verticale décorative entre colonnes (largeur, style, couleur, comme une bordure)
• column-span: all: appliqué à un titre ou un encadré pour couvrir toute la largeur sur toutes les colonnes