OUJOOD.COM
CSS Multi-colonnes : Le Guide Complet
CSS3 cours tutorialSupport Navigateurs Modernes
|
Propriété |
Support Navigateurs |
||||
|---|---|---|---|---|---|
| column-count |  Chrome 50+ |
 Firefox 52+ |
 IE 10+ |
 Opera 37+ |
 Safari 10+ |
| column-gap | Chrome 50+ |
Firefox 52+ |
IE 10+ |
Opera 37+ |
Safari 10+ |
| column-rule | Chrome 50+ |
Firefox 52+ |
IE 10+ |
Opera 37+ |
Safari 10+ |
Excellente nouvelle : Tous les navigateurs modernes supportent nativement les propriétés multi-colonnes sans préfixes vendors !
Les préfixes -webkit- et -moz- ne sont plus nécessaires depuis 2017.
Note : Si vous devez supporter Internet Explorer 9 ou versions antérieures, ces propriétés ne fonctionneront pas.
Créer Plusieurs Colonnes avec column-count
La propriété column-count définit le nombre de colonnes dans lesquelles le contenu sera réparti automatiquement. C'est la méthode la plus simple pour créer une mise en page multi-colonnes.
Exemple : Diviser un article en trois colonnes
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS Multi-colonnes - Exemple de base</title>
<style>
.article-colonnes {
column-count: 3;
max-width: 1200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="article-colonnes">
<h2>Les Avantages des Mises en Page Multi-colonnes</h2>
<p>Les colonnes multiples améliorent la lisibilité des longs textes en réduisant la longueur des lignes.
Des études typographiques montrent que des lignes de 45-75 caractères sont optimales pour la lecture.</p>
<p>En utilisant les propriétés CSS multi-colonnes, vous pouvez créer des layouts sophistiqués
sans avoir besoin de diviser manuellement votre contenu en plusieurs éléments HTML. Le navigateur
gère automatiquement la distribution du contenu.</p>
<p>Cette technique est particulièrement utile pour les articles de blog, les sections de contenu
dense, et les designs inspirés des magazines imprimés. Elle s'adapte également bien aux différentes
tailles d'écran avec les media queries.</p>
</div>
</body>
</html>
Gérer l'Espacement avec column-gap
La propriété column-gap contrôle l'espace (gouttière) entre les colonnes. Par défaut, cet espace est de 1em, mais vous pouvez le personnaliser selon vos besoins de design.
Exemple : Définir un espacement de 40 pixels entre les colonnes
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS Multi-colonnes avec espacement personnalisé</title>
<style>
.magazine-layout {
column-count: 3;
column-gap: 40px;
padding: 20px;
background-color: #f9f9f9;
}
.magazine-layout h3 {
column-span: all; /* Le titre s'étend sur toutes les colonnes */
margin-bottom: 1em;
}
</style>
</head>
<body>
<article class="magazine-layout">
<h3>L'Évolution du Web Design</h3>
<p>Le design web a considérablement évolué au cours des dernières décennies.
Des premiers sites statiques aux applications web complexes d'aujourd'hui,
les technologies CSS ont joué un rôle crucial dans cette transformation.</p>
<p>Les mises en page multi-colonnes représentent une des nombreuses techniques
qui permettent aux designers de créer des expériences visuelles riches et
variées, tout en maintenant un code propre et maintenable.</p>
<p>Avec l'augmentation des tailles d'écran, utiliser intelligemment l'espace
horizontal devient essentiel pour offrir une expérience de lecture confortable
et professionnelle à vos utilisateurs.</p>
</article>
</body>
</html>
Ajouter des Séparateurs avec column-rule
La propriété column-rule permet d'ajouter une ligne de séparation visuelle entre les colonnes.
Elle fonctionne de manière similaire à la propriété border et accepte les mêmes valeurs pour la largeur, le style et la couleur.
Exemple : Ajouter une règle stylisée entre les colonnes
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS Multi-colonnes avec séparateurs</title>
<style>
.elegant-columns {
column-count: 3;
column-gap: 40px;
column-rule: 2px solid #0066cc;
padding: 30px;
font-family: Georgia, serif;
line-height: 1.6;
}
/* Version responsive */
@media (max-width: 768px) {
.elegant-columns {
column-count: 2;
}
}
@media (max-width: 480px) {
.elegant-columns {
column-count: 1;
}
}
</style>
</head>
<body>
<div class="elegant-columns">
<h2>Techniques Avancées de Mise en Page</h2>
<p>Les propriétés multi-colonnes CSS offrent une flexibilité remarquable
pour créer des designs sophistiqués. En combinant column-count, column-gap
et column-rule, vous pouvez reproduire l'esthétique des magazines imprimés
directement dans le navigateur.</p>
<p>N'oubliez pas d'utiliser les media queries pour adapter le nombre de colonnes
aux différentes tailles d'écran. Sur mobile, une seule colonne est généralement
préférable, tandis que les grands écrans peuvent accommoder trois colonnes ou plus.</p>
<p>Cette approche responsive garantit que votre contenu reste lisible et
esthétiquement plaisant sur tous les appareils, des smartphones aux écrans
de bureau larges.</p>
</div>
</body>
</html>
Propriétés CSS Multi-colonnes : Référence Complète
Propriété |
Description |
|---|---|
| column-count | Définit le nombre de colonnes dans lesquelles diviser le contenu |
| column-width | Spécifie la largeur optimale pour chaque colonne (alternative à column-count) |
| columns | Propriété raccourcie pour définir column-width et column-count simultanément |
| column-gap | Contrôle l'espace (gouttière) entre les colonnes |
| column-rule | Propriété raccourcie pour créer une ligne de séparation entre les colonnes |
| column-rule-width | Définit l'épaisseur de la ligne de séparation |
| column-rule-style | Spécifie le style de la ligne (solid, dashed, dotted, etc.) |
| column-rule-color | Définit la couleur de la ligne de séparation |
| column-span | Permet à un élément de s'étendre sur toutes les colonnes (valeurs: none | all) |
| column-fill | Contrôle comment le contenu est distribué entre les colonnes (balance | auto) |
chapitre précédent chapitre suivant