column-count
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.
La propriété CSS column-count divise le contenu d'un élément en le répartissant dans le nombre de colonnes à définir.
Exemple interactif
column-count: 2;
column-count: 3;
column-count: 4;
column-count: auto;
column-width: 8rem;
<section id="default-example">
<p id="example-element">
Londres. Le trimestre de Michaelmas venait de se terminer, et le lord
chancelier siégeait dans la salle de Lincoln's Inn. Un novembre implacable.
Tant de boue dans les rues comme si les eaux venaient tout juste de se
retirer de la surface de la terre, et il ne serait pas étonnant de
rencontrer un Megalosaurus, quarante pieds de long environ, se dandinant
comme un lézard éléphantesque en montant Holborn Hill.
</p>
</section>
#example-element {
width: 100%;
text-align: left;
}
Syntaxe
css
/* Valeurs avec un mot-clé */
column-count: auto;
/* Valeurs de type <number> */
column-count: 3;
/* Valeurs globales */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;
Valeurs
auto-
Le nombre de colonnes est déterminé par d'autres propriétés CSS, telles que
column-width. <integer>-
Est un entier (
<integer>) strictement positif décrivant le nombre idéal de colonnes dans lesquelles le contenu de l'élément est réparti. Si la largeur de colonne (column-width) est également définie sur une valeur qui n'est pasauto, elle indique simplement le nombre maximal de colonnes autorisé.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | Block containers except table wrapper boxes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | un entier |
Syntaxe formelle
column-count =
auto |
<integer [1,∞]>
<integer> =
<number-token>
Exemples
Diviser un paragraphe en trois colonnes
HTML
html
<p class="boite-de-contenu">
Il s'agit d'un bloc de texte réparti en trois colonnes grâce à la propriété
CSS <code>column-count</code>. Le texte est réparti également entre les
colonnes.
</p>
CSS
css
.boite-de-contenu {
column-count: 3;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # cc |
Compatibilité des navigateurs
Voir aussi
- La propriété
column-widthet raccourciecolumns - Les propriétés
column-rule-color,column-rule-style,column-rule-widthet raccourciecolumn-rule - Apprendre : La disposition multi-colonnes
- Les concepts de bases pour la disposition multi-colonnes