En CSS, il est possible de répartir automatiquement un texte sur plusieurs colonnes dans un seul bloc. Cette technique permet de créer des mises en page proches d'un journal ou d'un magazine, sans devoir multiplier les balises HTML.
Introduction aux colonnes CSS
Quand on veut afficher un long contenu, on pense souvent à empiler des paragraphes les uns sous les autres. Pourtant, CSS propose aussi un système capable de répartir automatiquement un bloc de texte sur plusieurs colonnes.
Cette fonctionnalité repose sur plusieurs propriétés liées entre elles :
-
column-count, -
column-width, -
column-gap, -
column-rule.
Le principe est simple : vous appliquez ces propriétés à un seul élément bloc, et le navigateur se charge de distribuer le contenu dans plusieurs colonnes.
<div class="colonnes">
<p>Un long contenu...</p>
<p>Encore du contenu...</p>
<p>Et ainsi de suite.</p>
</div>
Nous n'avons ici qu'un seul conteneur HTML. Ce sont les propriétés CSS qui vont créer l'effet de colonnes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat, sem sed dictum mollis, lectus justo interdum odio, sit amet gravida nunc tortor non risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
column-count ou comment définir un nombre de colonne
La propriété column-count sert à indiquer au navigateur combien de colonnes vous souhaitez afficher.
.colonnes{
column-count: 3;
}
Ici, le navigateur essaiera de répartir le contenu en trois colonnes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat, sem sed dictum mollis, lectus justo interdum odio, sit amet gravida nunc tortor non risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Le résultat peut être pratique pour un long texte, mais il faut garder à l'esprit que plus vous ajoutez de colonnes, plus la largeur disponible pour chacune diminue.
Attention ! Si vos colonnes deviennent trop étroites, la lecture peut vite devenir inconfortable.
Définir la taille des colonnes avec column-width
Plutôt que d'imposer un nombre précis de colonnes, vous pouvez demander une largeur idéale avec column-width.
.colonnes{
column-width: 250px;
}
Avec cette règle, le navigateur essaie de créer autant de colonnes que possible, en gardant une largeur proche de 250px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat, sem sed dictum mollis, lectus justo interdum odio, sit amet gravida nunc tortor non risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
C'est une approche souvent plus souple, car elle s'adapte mieux à la largeur disponible.
En pratique :
- sur un écran large, plusieurs colonnes peuvent apparaître,
- sur un écran plus étroit, le navigateur peut en afficher moins.
Voilà pourquoi column-width est souvent plus flexible que column-count.
Comme column-width attend une valeur de taille, plusieurs unités peuvent être utilisées selon le contexte :
- px pour une largeur fixe,
- em ou rem pour une largeur liée à la taille du texte,
- % si vous travaillez avec une logique proportionnelle,
- vw pour une valeur liée à la largeur de la fenêtre.
gérer les goutières avec column-gap
Quand plusieurs colonnes sont affichées, il faut aussi gérer l'espace entre elles. Cet espace s'appelle la gouttière.
La propriété column-gap permet justement de définir cet écart.
.colonnes{
column-count: 3;
column-gap: 40px;
}
Ici, chaque colonne sera séparée de la suivante par un espace de 40px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat, sem sed dictum mollis, lectus justo interdum odio, sit amet gravida nunc tortor non risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ce réglage est important pour le confort de lecture. Si les colonnes sont trop proches, l'œil peut passer trop facilement de l'une à l'autre.
Comme pour d'autres espacements en CSS, column-gap peut accepter plusieurs unités :
- px pour un écart fixe,
- em ou rem pour un écart lié à la taille de la typographie,
- % pour un espacement proportionnel,
- vw pour un écart lié à la largeur du navigateur.
Styliser les bordures avec column-rule
Il est aussi possible d'ajouter une séparation visuelle entre les colonnes avec la propriété column-rule.
Cette propriété fonctionne un peu comme border, mais elle s'applique entre les colonnes.
.colonnes{
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #999;
}
Le navigateur dessinera alors une ligne verticale entre les colonnes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat, sem sed dictum mollis, lectus justo interdum odio, sit amet gravida nunc tortor non risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Cette bordure peut aider à mieux distinguer les colonnes, mais il ne faut pas en abuser si vous cherchez un rendu léger.
La propriété column-rule fonctionne comme une bordure classique. Sa partie numérique accepte donc surtout des unités de longueur comme :
- px,
- em,
- rem.
Limites d'une mise avec la propriété columns
Le système de colonnes CSS est pratique, mais il a aussi ses limites.
- il est surtout adapté à du contenu textuel,
- il peut devenir moins lisible sur des contenus très variés,
- le passage d'un élément d'une colonne à l'autre est géré automatiquement par le navigateur.
Autrement dit, vous contrôlez le principe général, mais pas chaque placement précis comme avec d'autres techniques de mise en page.
Si vous avez besoin d'un contrôle très fin sur la disposition de plusieurs blocs distincts, des solutions comme Flexbox ou Grid seront souvent plus adaptées.
En revanche, pour un long texte à répartir dans un seul conteneur, les colonnes CSS peuvent être très utiles.