Propriété CSS column-width

Exemple interactif

column-width: auto;

column-width: 6rem;

column-width: 120px;

column-width: 18ch;

<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 {
  width: 100%;
  columns: auto;
  text-align: left;
}

Syntaxe

/* Valeur avec un mot-clé */
column-width: auto;

/* Valeurs de type <length> */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

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

Valeurs

Cette propriété est définie par l'une des valeurs suivantes :

<length>

Indique la largeur optimale d'une colonne. La largeur réelle de la colonne peut différer de la valeur définie : elle peut être plus large si nécessaire pour remplir l'espace disponible, et plus étroite lorsque l'espace disponible est trop petit. La valeur doit être strictement positive sinon la déclaration est invalide. Les valeurs exprimées en pourcentage sont également invalides.

auto

Un mot-clé indiquant que la largeur de la colonne doit être déterminée grâce aux autres propriétés CSS, comme column-count.

Description

La propriété column-width définit la largeur de colonne préférée dans une disposition à plusieurs colonnes. Le conteneur a autant de colonnes que possible sans qu'aucune d'entre elles n'ait une largeur inférieure à la valeur de column-width. Si la largeur du conteneur est inférieure à la valeur définie, la largeur de la colonne unique est inférieure à la largeur de colonne déclarée.

Cette propriété peut vous aider à créer des conceptions réactives qui s'adaptent à différentes tailles d'écran. Surtout en présence de la propriété column-count (qui a la priorité), vous devez définir toutes les valeurs de longueur associées pour obtenir une largeur de colonne exacte. Dans le texte horizontal, il s'agit de width, column-width, column-gap, et column-rule-width.

La propriété column-width, ainsi que les propriétés column-height et column-count, peut également être définie à l'aide du raccourci columns.

Définition formelle

Syntaxe formelle

column-width = 
  auto        |
  <box-size>  |
  auto        |
  <box-size>  

<box-size> = 
  <length-percentage [0,∞]>                 |
  stretch                                   |
  contain                                   |
  min-content                               |
  max-content                               |
  fit-content                               |
  stretch( <length-percentage [0,∞]> )      |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-sum>      |
  <calc-size()>   |
  any             

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Exemples

Définir la largeur de colonne en pixels

HTML

<div class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</div>

CSS

.content-box {
  column-width: 100px;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété column-count
• La propriété column-height
• La propriété raccourcie columns
• Apprendre : La disposition à plusieurs colonnes
• Les concepts de base pour la disposition à plusieurs colonnes