6XC

Générateur de colonnes CSS

Faites couler le texte dans des colonnes façon journal — nombre, espacement et ligne de séparation — avec aperçu en direct et CSS.

787 vues

La disposition multi-colonnes fait couler un long texte côte à côte comme une page de journal. Changez le nombre et l'espacement et regardez cet exemple se réorganiser instantanément. Activez la ligne pour tracer un fin séparateur entre les colonnes. Sur les longs articles, elle raccourcit la longueur des lignes, ce qui facilite la lecture. La disposition multi-colonnes fait couler un long texte côte à côte comme une page de journal. Changez le nombre et l'espacement et regardez cet exemple se réorganiser instantanément. Activez la ligne pour tracer un fin séparateur entre les colonnes. Sur les longs articles, elle raccourcit la longueur des lignes, ce qui facilite la lecture.

Disposition CSS multi-colonnes

column-count divise le contenu d'un bloc en colonnes égales façon journal ; column-gap définit l'espace entre elles et column-rule trace une ligne de séparation (même syntaxe que border). Le texte s'écoule automatiquement d'une colonne à l'autre — idéal pour les longs articles, les pieds de page et les listes d'index. Utilisez break-inside: avoid sur les éléments que vous ne voulez pas voir coupés entre les colonnes.

Questions fréquentes

column-count ou column-width ?

column-count fixe le nombre de colonnes ; column-width laisse le navigateur ajuster autant de colonnes que possible d'au moins cette largeur — mieux adapté aux mises en page responsives. Les deux peuvent être combinées.

Comment empêcher un élément d'être coupé entre les colonnes ?

Donnez-lui break-inside: avoid; — utile pour les cartes, les images avec légendes et les éléments de liste.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer