1. Web
  2. CSS
  3. Référence
  4. Propriétés CSS
  5. columns

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

columns

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

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;

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

La propriété columns se définit avec un ou deux valeurs parmi celles décrites ci-après, dans n'importe quel ordre.

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 ni cette valeur ni la largeur des colonnes ne sont auto, elle indique simplement le nombre maximal de colonnes autorisé. Voir column-count.

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

HTML

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 `columns`. Le texte est réparti équitablement entre les
  colonnes.
</p>

CSS

css
.content-box {
  columns: 3 auto;
}

Résultat

Spécifications

Specification
CSS Multi-column Layout Module Level 1
# columns

Compatibilité des navigateurs

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content