La propriété CSS columns
La propriété CSS columns définit la largeur et le nombre de colonnes. Découvrez ses valeurs et essayez des exemples.
La propriété CSS columns est un raccourci qui répartit le contenu d'un seul élément en plusieurs colonnes, à la manière d'un journal. Elle définit simultanément deux propriétés longues :
column-count— le nombre maximum de colonnes.column-width— la largeur minimale que doit avoir chaque colonne (il s'agit d'une largeur suggérée, pas d'une valeur fixe).
Au lieu d'écrire ces deux lignes :
.example {
column-width: 100px;
column-count: 3;
}on en écrit une seule :
.example {
columns: 100px 3;
}Les deux valeurs peuvent apparaître dans n'importe quel ordre, car l'une est une longueur et l'autre un entier, et le navigateur peut les distinguer. Vous pouvez également n'en fournir qu'une seule et laisser l'autre prendre la valeur auto par défaut.
Pourquoi utiliser columns ?
La mise en page multi-colonnes est idéale pour les longs blocs de texte — articles, définitions, nuages de tags — dans lesquels vous souhaitez que le lecteur parcoure des lignes plus courtes. Contrairement à Flexbox ou CSS Grid, vous ne découpez pas le contenu en boîtes séparées ; le navigateur répartit un seul bloc de contenu sur les colonnes et le redistribue automatiquement lorsque le conteneur est redimensionné.
Comment interagissent les deux valeurs
Les valeurs décrivent un objectif, et le navigateur choisit la meilleure disposition :
column-widthest traitée comme un minimum. Le navigateur place autant de colonnes d'au moins cette largeur que le conteneur le permet.column-countplafonne ce nombre. Le navigateur ne crée jamais plus de colonnes que cette valeur, même si plus pourraient tenir.
Ainsi, columns: 100px 3 signifie : « créer des colonnes d'au moins 100px de large, mais jamais plus de 3. » Dans un conteneur large, vous obtenez 3 colonnes ; à mesure que le conteneur rétrécit, le nombre passe à 2, puis à 1, en maintenant chaque colonne à ≥ 100px. C'est ce qui rend la mise en page responsive sans recourir aux media queries.
Si la largeur et le nombre demandés ne peuvent pas tous les deux tenir dans l'élément, le navigateur privilégie la largeur et réduit le nombre de colonnes pour la respecter.
La propriété columns fait partie des propriétés CSS3. Pour espacer et séparer les colonnes qu'elle génère, associez-la à column-gap et column-rule ; pour qu'un titre s'étende sur toutes les colonnes, utilisez column-span.
| Valeur initiale | auto auto |
|---|---|
| S'applique à | Les conteneurs de blocs, sauf les boîtes de type table. |
| Hérité | Non. |
| Animable | Oui. Seule column-width est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columns = "100px 2"; |
Syntaxe
Syntaxe de la propriété CSS columns
columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;Exemple de la propriété columns :
Exemple de la propriété CSS columns avec les propriétés column-width et column-count
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 100px 3;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Résultat
Dans l'exemple suivant, chaque colonne mesure au moins 50px de large et le nombre de colonnes est limité à 5. Comme les colonnes sont étroites, le navigateur peut en afficher jusqu'à 5 dans un conteneur large — et moins au fur et à mesure qu'il rétrécit :
Exemple avec une largeur plus petite et un nombre de colonnes plus élevé
Exemple de la propriété CSS columns avec column-width et column-count comme valeur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 50px 5;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
auto | column-width et column-count sont tous deux définis sur auto. Il s'agit de la valeur par défaut. |
<length> | Définit la largeur minimale des colonnes. |
<integer> | Définit le nombre maximum de colonnes. |
initial | Rétablit la valeur par défaut de la propriété. |
inherit | Hérite de la propriété de son élément parent. |
Pièges courants
- C'est une suggestion, pas une commande.
column-widthest un minimum, donc la largeur rendue est presque toujours supérieure à la valeur fournie. Pour fixer une largeur exacte, vous devez également contrôler la taille du conteneur. - Les colonnes sont équilibrées, pas remplies de haut en bas. Par défaut, le navigateur cherche à rendre toutes les colonnes à peu près de la même hauteur, plutôt que de remplir la première avant de commencer la suivante.
- Attention aux ruptures. Les mots longs ou les éléments non sécables peuvent déborder d'une colonne étroite ;
break-inside: avoidaide à maintenir l'intégrité d'éléments comme des cartes. - Seule
column-widthest animable. Le nombre de colonnes passe d'un entier à l'autre par sauts, ce qui rend les transitions sur cette propriété non fluides.