columns

Baseline Large disponibilité

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é raccourcie CSS columns permet de définir le nombre maximum de colonnes à utiliser pour afficher le contenu d'un élément, ainsi que la largeur minimale et la hauteur maximale des colonnes de l'élément.

Exemple interactif

columns: 2;

columns: 6rem auto;

columns: 12em;

columns: 3;

<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 {
  min-width: 21rem;
  text-align: left;
}

Propriétés constituantes

Cette propriété est un raccourci pour les propriétés CSS suivantes :

Syntaxe

css

/* Colonnes avec largeur */
columns: 18em;

/* Colonnes avec un nombre */
columns: auto;
columns: 2;

/* Combinaison d'une largeur et d'un nombre */
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

/* Largeur et/ou nombre de colonnes, et hauteur des colonnes */
columns: 18em / 10em;
columns: 2 / 90vh;
columns: 2 auto / 300px;

/* Valeurs globales */
columns: inherit;
columns: initial;
columns: revert;
columns: revert-layer;
columns: unset;

La valeur de la propriété columns peut être définie comme une valeur <column-count> et/ou une valeur <column-width>, dans n'importe quel ordre, éventuellement suivie d'une valeur <column-height> précédée d'un slash (/).

Valeurs

<'column-width'>: La largeur optimale de la colonne, définie comme un <length> ou le mot-clé auto. La largeur réelle peut être plus large ou plus étroite pour s'adapter à l'espace disponible. Voir column-width.
<'column-count'>: Le nombre idéal de colonnes dans lequel le contenu de l'élément doit être disposé, défini comme un <integer> ou le mot-clé auto. Si défini comme un <integer>, il définit le nombre maximal de colonnes autorisé. Voir column-count.
<'column-height'> Expérimental: La hauteur des colonnes définie comme un <length> ou le mot-clé auto. Voir column-height.

Note : La définition d'une valeur <column-height> réinitialise la propriété column-wrap à sa valeur initiale, auto. Lorsque <column-height> est défini sur une <length>, la valeur auto de column-wrap devient wrap. Lorsque <column-height> est défini sur auto, elle devient nowrap.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `column-width`: `auto` `column-count`: `auto` `column-height`: `auto`
Applicabilité	Conteneurs de type bloc, sauf les boîtes englobant les tableaux
Héritée	non
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `column-width`: `auto` if specified as `auto`, otherwise for `<length>` the absolute value specified `column-count`: comme défini `column-height`: `auto` if specified as `auto`, otherwise for `<length>` the absolute value specified
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `column-width`: par type de valeur calculée `column-count`: un entier `column-height`: par type de valeur calculée

Syntaxe formelle

columns = 
  [ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?  

<column-width> = 
  auto                                |
  <length [0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

<column-count> = 
  auto             |
  <integer [1,∞]>  

<column-height> = 
  auto            |
  <length [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

<integer> = 
  <number-token>

Exemples

Définir trois colonnes égales

Cet exemple montre comment diviser un conteneur de texte en trois colonnes égales.

HTML

Nous incluons un élément de base <p> contenant du texte.

html

<p class="content-box">
  Il s'agit d'un bloc de texte réparti en trois colonnes à l'aide de la
  propriété CSS <code>columns</code>. Le texte est réparti équitablement entre
  les colonnes.
</p>

CSS

Nous définissons une valeur pour la propriété columns sur le paragraphe, incluant une valeur <column-count> de 3 et une valeur <column-width> de auto.

body {
  width: 60%;
  margin: 0 auto;
}

css

.content-box {
  columns: 3 auto;
}

Résultat

Notez comment le texte est réparti en trois colonnes.

Créer des colonnes à hauteur fixe et à retour à la ligne

Cet exemple montre comment inclure une valeur <column-height> avec la propriété raccourcie columns pour diviser un conteneur de texte en colonnes à hauteur fixe qui se replient sur de nouvelles lignes lorsque le bord en ligne du conteneur est atteint.

HTML

Nous incluons un élément de base <p> contenant du texte.

html

<p class="content-box">
  Il s'agit d'un bloc de texte réparti en trois colonnes à l'aide de la
  propriété CSS <code>columns</code>. Cela inclut une valeur
  <code>column-count</code> de <code>3</code>, une valeur
  <code>column-width</code> de <code>auto</code>, et une valeur
  <code>column-height</code> de <code>5em</code>. La valeur
  <code>column-wrap</code> est définie sur sa valeur initiale,
  <code>auto</code>&nbsp;; lorsqu'une valeur <code>column-height</code> est
  incluse, <code>column-wrap: auto</code> devient <code>wrap</code>, ce qui
  permet aux colonnes de se replier sur plusieurs lignes. Le texte est réparti
  équitablement entre les colonnes et placé sur plusieurs lignes.
</p>

CSS

Nous définissons une valeur pour la propriété columns sur le paragraphe, incluant une valeur <column-count> de 3, une valeur <column-width> de auto, et une valeur <column-height> de 5em. Comme <column-height> est défini sur une <length>, la valeur de column-wrap du paragraphe est calculée sur wrap, ce qui permet aux colonnes de se replier sur plusieurs lignes.

css

.content-box {
  columns: 3 auto / 5em;
}

body {
  width: 60%;
  margin: 0 auto;
}

@supports not (columns: 3 auto / 5em) {
  body::before {
    content: "Votre navigateur ne prend pas en charge la propriété 'column-height'.";
    background-color: wheat;
    position: fixed;
    inset: 40% 0;
    height: fit-content;
    text-align: center;
    padding: 1rem 0;
  }
}

Résultat

Notez comment le texte est réparti en trois colonnes. Chaque colonne a une hauteur de 5em. Après chaque troisième colonne, les colonnes se replient sur une nouvelle ligne dans la direction du bloc.

Spécifications

Spécification
CSS Multi-column Layout Module Level 2 # propdef-columns

Compatibilité des navigateurs

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 17 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu