column-count
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
La propriété column-count
décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.
Exemple interactif
Syntaxe
/* Valeurs avec un mot-clé */
column-count: auto;
/* Valeurs numériques */
/* Type <number> */
column-count: 3;
/* Valeurs globales */
column-count: inherit;
column-count: initial;
column-count: unset;
Valeurs
auto
-
Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de
column-width
). <number>
-
Un nombre (type
<integer>
) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur decolumn-width
n'est pasauto
, cette propriété 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,∞]>
Exemples
CSS
.exemple {
border: 10px solid #000000;
column-count: 3;
}
HTML
<p class="exemple">
« Mais alors, » pensa Alice, « ne serai-je donc jamais plus vieille que je ne
le suis maintenant ? D’un côté cela aura ses avantages, ne jamais être une
vieille femme. Mais alors avoir toujours des leçons à apprendre ! Oh, je
n’aimerais pas cela du tout. » « Oh ! Alice, petite folle, » se répondit-elle.
« Comment pourriez-vous apprendre des leçons ici ? Il y a à peine de la place
pour vous, et il n’y en a pas du tout pour vos livres de leçons. »
</p>
Résultat
Spécifications
Specification |
---|
CSS Multi-column Layout Module Level 1 # cc |
Compatibilité des navigateurs
BCD tables only load in the browser