columns

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é 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

css
/* 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 de column-width n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
ApplicabilitéBlock containers except table wrapper boxes
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour 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

css
.exemple {
  margin: 0;
  height: 90px;
  border: 3px solid black;
  columns: 3;
}

HTML

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