columns
Répartit le contenu d’un élément en colonnes comme dans un journal. Raccourci pour column-width et column-count.
- Valeur initiale
auto auto- Héritée
- Non
- Animable
- oui, la largeur en tant que longueur, le nombre en tant qu’entier
- S’applique à
- conteneurs de bloc, sauf les tableaux
- JavaScript
element.style.columns = "12rem 3"
Exemple
#.topics {
columns: 8rem 3;
column-gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.topics li {
break-inside: avoid;
padding-block: 4px;
}<p style="margin: 0 0 8px; font-weight: 600;">Sujets de la doc CSS</p>
<ul class="topics">
<li>Sélecteurs</li>
<li>Pseudo-classes</li>
<li>Modèle de boîte</li>
<li>Flexbox</li>
<li>Grid</li>
<li>Typographie</li>
<li>Couleurs et arrière-plans</li>
<li>Effets</li>
<li>Transitions</li>
<li>Animations</li>
<li>Règles @</li>
<li>Fonctions</li>
</ul>Définition et utilisation
#La propriété columns transforme un bloc ordinaire en conteneur multicolonne. Le contenu s’écoule comme dans un journal : il remplit la première colonne, passe à la suivante, et le navigateur égalise lui-même leur hauteur. Il n’y a besoin ni de modifier le HTML ni de découper le texte en plusieurs parties.
C’est un raccourci pour deux propriétés. column-width indique la largeur idéale d’une colonne : le navigateur crée autant de colonnes que possible, et les élargit pour remplir l’espace. column-count indique le nombre de colonnes. Quand vous définissez les deux, le nombre agit comme une limite supérieure, donc columns: 12rem 3 signifie au maximum trois colonnes, chacune large d’au moins 12rem. La largeur seule suffit à obtenir une mise en page responsive sans media queries.
L’espacement entre les colonnes se règle avec column-gap (la valeur par défaut normal vaut ici 1em), et la ligne entre elles avec column-rule. Vous obtenez un titre sur toute la largeur grâce à column-span: all, et break-inside: avoid sur un élément l’empêche d’être coupé entre deux colonnes, ce qui est utile pour les cartes, les citations et les éléments de liste.
Gardez à l’esprit l’ordre de lecture : les éléments se suivent de haut en bas, colonne par colonne, et non ligne par ligne. Pour une grille de cartes où l’ordre de gauche à droite compte, Grid est préférable. Évitez aussi les textes longs dans des colonnes plus hautes que l’écran, car le lecteur doit alors défiler vers le bas puis revenir en haut.
Syntaxe
#columns: <largeur de colonne> || <nombre de colonnes>;
column-width: auto | <longueur>;
column-count: auto | <entier>;Valeurs
#- Pas de colonnes, les notes s’enchaînent les unes sous les autres. C’est la valeur par défaut, soit
auto auto. nombre de colonnes
Exactement deux colonnes de largeur égale. Remarquez qu’une note plus longue peut s’étendre sur plusieurs colonnes.largeur de colonne
Autant de colonnes que possible, chacune large d’au moins 80px. Faites glisser le coin inférieur droit du cadre vers la gauche, et le nombre de colonnes diminuera.largeur et limite
Les colonnes font au moins 80px, mais il n’y en aura jamais plus de deux. Là où la version précédente en plaçait trois, celle-ci s’arrête à deux colonnes plus larges.sans découpage
Deux colonnes, mais chaque note reste d’un seul tenant. Si elle ne tient pas, le navigateur la déplace en entier dans la colonne suivante.
Valeurs en pratique
#auto
auto auto..demo { columns: auto; }2
.demo { columns: 2; }80px
.demo { columns: 80px; }80px 2
.demo { columns: 80px 2; }break-inside: avoid
.demo { columns: 2; }
.note { break-inside: avoid; }Plus d’exemples
#.gallery {
columns: 120px;
column-gap: 10px;
}
.gallery > * {
break-inside: avoid;
margin-bottom: 10px;
}<style>
.tile { display: grid; align-items: end; padding: 8px 10px; border-radius: 10px; color: #fff; font-weight: 600; font-size: 13px; }
</style>
<div class="gallery">
<div class="tile" style="height: 90px; background: linear-gradient(160deg, #7c3aed, #4c1d95);">1</div>
<div class="tile" style="height: 140px; background: linear-gradient(160deg, #0ea5e9, #075985);">2</div>
<div class="tile" style="height: 70px; background: linear-gradient(160deg, #10b981, #065f46);">3</div>
<div class="tile" style="height: 120px; background: linear-gradient(160deg, #f59e0b, #92400e);">4</div>
<div class="tile" style="height: 80px; background: linear-gradient(160deg, #f43f5e, #9f1239);">5</div>
<div class="tile" style="height: 110px; background: linear-gradient(160deg, #a78bfa, #5b21b6);">6</div>
</div>Les tuiles de hauteurs différentes s’empilent sans trous, car chacune se place sous la précédente dans la même colonne. Les numéros montrent l’ordre : il va de haut en bas, colonne par colonne, et non ligne par ligne.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Plutôt qu’un nombre fixe de colonnes, indiquez une largeur, par exemple
columns: 14rem. Sur téléphone, il restera une seule colonne, et sur un écran large, d’autres apparaîtront. - Marquez les cartes, citations et éléments de liste dans des colonnes avec
break-inside: avoid, pour qu’ils ne se coupent pas en deux. - Si les éléments doivent se suivre en ligne, par exemple des résultats de recherche, utilisez Grid. Dans les colonnes, l’ordre va de haut en bas.
Entrées associées
#- column-ruleTrace une ligne entre les colonnes d’une mise en page multicolonne. Raccourci pour l’épaisseur, le style et la couleur de la ligne.
- column-gapDéfinit l’espace entre les colonnes d’un conteneur flex, grid ou multi-colonnes.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.