Générateur de colonnes CSS Créez des mises en page de texte à plusieurs colonnes avec un nombre de colonnes, un espace et un style de règle personnalisables.

🎨

Générateur de colonnes CSS

Créez des mises en page de texte à plusieurs colonnes avec un nombre de colonnes, un espace et un style de règle personnalisables.

Définir le nombre de colonnes ou la largeur

Choisissez entre un mode à comptage de colonnes fixe et un mode à largeur de colonne réactive.

Personnaliser les règles de colonnes

Définissez la taille d'espacement et personnalisez le style, la largeur et la couleur de la ligne de séparation.

Copier le CSS

Prévisualisez la disposition de texte en plusieurs colonnes et copiez le CSS.

Loading tool...

What Is Générateur de colonnes CSS?

Le générateur de colonnes CSS crée des mises en page de texte à plusieurs colonnes rappelant les conceptions de journaux ou de magazines. Le module de mise en page multi-colonnes CSS permet au contenu de s'étendre automatiquement sur plusieurs colonnes, et cet outil vous donne un contrôle visuel sur toutes les propriétés clés. Vous pouvez choisir entre column-count (nombre fixe de colonnes) ou column-width (colonnes réactives qui s'adaptent en fonction de la largeur du conteneur). La propriété column-gap contrôle l'espace entre les colonnes, et column-rule ajoute une ligne de diviseur visible entre les colonnes avec un style, une largeur et une couleur personnalisables. L'aperçu montre vos paramètres appliqués à un texte d'exemple, démontrant comment le contenu s'étend sur les colonnes. Cette technique de mise en page est excellente pour les pages lourdes en texte, les articles et la documentation.

Why Use Générateur de colonnes CSS?

Basculer entre les modes column-count et column-width
Règle de colonne personnalisable avec des options de style, de largeur et de couleur
Prévisualisation en temps réel avec du texte d'exemple fluide
Sept options de style de règle, notamment solide, pointillée et tirets

Common Use Cases

Dispositions d'articles

Créez des dispositions d'articles à plusieurs colonnes de style journal pour une meilleure lisibilité.

Pages de documentation

Utilisez des colonnes pour les glossaires, les index et les pages de référence.

Listes de cartes

Organisez le contenu similaire à une carte dans une disposition en plusieurs colonnes de style mosaïque.

Contenu du pied de page

Organisez les liens et les informations du pied de page en colonnes nettes.

Technical Guide

Le module multi-colonnes CSS utilise column-count pour spécifier le nombre exact de colonnes ou column-width pour définir une largeur de colonne minimale (le navigateur détermine le compte optimal). La propriété column-gap définit l'espacement entre les colonnes. column-rule est un raccourci pour column-rule-width, column-rule-style et column-rule-color, ajoutant une ligne de diviseur visible entre les colonnes. Le contenu s'étend automatiquement d'une colonne à l'autre. Pour empêcher les éléments de se rompre en travers des colonnes, utilisez break-inside: avoid. La propriété column-span: all fait en sorte qu'un élément s'étende sur toutes les colonnes (utile pour les titres). Les mises en page de colonnes conviennent bien au contenu textuel mais peuvent causer des problèmes avec les éléments interactifs ou les images. Pour les conceptions réactives, column-width est généralement préféré à column-count car il s'adapte naturellement à la largeur du conteneur.

Tips & Best Practices

1
Utilisez column-width pour des dispositions réactives qui s'adaptent à la taille du conteneur
2
Ajoutez break-inside: avoid pour éviter les ruptures de contenu disgracieuses
3
Utilisez column-span: all pour les titres qui doivent s'étendre sur toutes les colonnes
4
Gardez le nombre de colonnes sous 4 pour une lecture confortable sur les écrans

Related Tools

Zone de jeu CSS Flexbox

Explorateur visuel CSS Flexbox avec contrôles interactifs pour toutes les propriétés des conteneurs flexibles.

🎨 CSS & Design

Zone de jeu CSS Grid

Construteur visuel CSS Grid avec contrôles interactifs pour les colonnes de modèle, les lignes et les espaces.

🎨 CSS & Design

Testeur de conception responsive

Prévisualisez les sites Web aux points de rupture d'appareil courants avec un affichage iframe intégré.

🎨 CSS & Design

Générateur d'échelle typographique

Générer une échelle typographique modulaire avec une taille de base, un ratio et des unités personnalisables.

🎨 CSS & Design

Frequently Asked Questions

Q Quelle est la différence entre column-count et column-width ?

column-count définit un nombre fixe de colonnes. column-width définit une largeur minimale et laisse le navigateur déterminer le comptage de manière réactive.

Q Puis-je empêcher le contenu de se rompre entre les colonnes ?

Oui, utilisez break-inside: avoid sur les éléments qui ne doivent pas être divisés en travers des colonnes.

Q La disposition à plusieurs colonnes fonctionne-t-elle avec les images ?

Oui, mais de grandes images peuvent causer des problèmes de disposition. Utilisez break-inside: avoid sur les conteneurs d'images.

Q Puis-je faire en sorte qu'un élément s'étende sur toutes les colonnes ?

Oui, utilisez column-span: all sur n'importe quel élément pour le faire s'étendre sur toute la largeur de toutes les colonnes.

Q La disposition à plusieurs colonnes est-elle prise en charge par tous les navigateurs ?

Oui, la disposition CSS multi-colonnes est prise en charge dans tous les navigateurs modernes.

About This Tool

Générateur de colonnes CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.