📚 Qu'est-ce que CSS Columns ?
La propriété CSS columns permet de créer des mises en page multi-colonnes,
similaires à celles des journaux ou magazines. Elle est un raccourci pour
column-width et column-count.
Les propriétés associées comme column-rule (pour les séparateurs) et
gap (pour l'espacement) permettent de contrôler finement l'apparence des colonnes.
Exemple Principal
Configuration avec largeur minimale et nombre maximum de colonnes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.columns {
columns: 150px 3;
column-rule: 1px solid #ccc;
gap: 3em;
}
📝 Note : Crée jusqu'à 3 colonnes de 150px minimum avec séparateur gris et
espacement de 3em.
column-count
Nombre de colonnes fixe, quelle que soit la largeur disponible
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
.columns {
column-count: 3;
column-rule: 2px solid #3498db;
column-gap: 2em;
}
✅ Idéal pour : Un nombre de colonnes constant et prévisible.
column-width
Largeur de colonne optimale, le nombre s'adapte automatiquement
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris. Duis aute irure dolor in reprehenderit.
.columns {
column-width: 200px;
column-rule: 3px dotted #e74c3c;
column-gap: 1.5em;
}
✅ Idéal pour : Un design responsive avec colonnes de taille optimale.
Gap Large
Espacement important entre les colonnes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo.
.columns {
columns: 2;
column-rule: 4px double #2ecc71;
column-gap: 4em;
}
📝 Note : Un gap important améliore la lisibilité entre colonnes.
Sans Séparateur
Colonnes sans ligne de séparation (column-rule)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
.columns {
columns: 150px 4;
column-gap: 2em;
/* Pas de column-rule */
}
✅ Idéal pour : Un design minimaliste et épuré.
🎯 Fonctionnalités Avancées
1. Column-Span : Titres sur toute la largeur
Titre sur toutes les colonnes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
h3 {
column-span: all;
background: #3498db;
padding: 10px;
}
2. Break-Inside : Éviter les ruptures
Bloc Important : Ce contenu ne sera pas coupé entre deux colonnes grâce à
break-inside: avoid. C'est utile pour garder ensemble les éléments importants comme les
citations ou les blocs de code.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
.no-break {
break-inside: avoid;
background: #fff3cd;
padding: 10px;
}
