columns
La propriété columns
est une propriété raccourcie permettant de définir les deux propriétés column-width
(qui définit la largeur des colonnes) et column-count
(qui définit le nombre de colonnes) en même temps.
Exemple interactif
Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).
Syntaxe
/* Largeur */
columns: 18em;
/* Nombre de colonnes */
columns: 1;
columns: auto;
/* Combinaison d'une largeur et d'un nombre */
columns: 1 auto;
columns: auto 12em;
columns: auto auto;
/* Valeurs globales */
columns: inherit;
columns: initial;
columns: unset;
La propriété columns
se définit avec un ou deux valeurs parmi celles décrites ci-après. L'ordre de ces valeurs n'a pas d'importance.
Valeurs
<'column-width'>
-
Une valeur de longueur (type
<length>
) fournissant une indication quant à la largeur optimale de la colonne ou le mot-clé auto. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide. <'column-count'>
-
Une quantité (type
<integer>
) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur decolumn-width
n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.
Définition formelle
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | Block containers except table wrapper boxes |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
columns =
<'column-width'> ||
<'column-count'>
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
CSS
.exemple {
margin: 0;
height: 90px;
border: 3px solid black;
columns: 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 # columns |
Compatibilité des navigateurs
BCD tables only load in the browser