column-width

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 novembre 2016.

La propriété CSS column-width définit la largeur optimale d'une colonne dans une mise en page multi-colonnes. Le conteneur comporte autant de colonnes que l'espace le permet, sans qu'aucune d'elles n'ait une largeur inférieure à la valeur column-width. Si la largeur du conteneur est inférieure à la valeur définie, la largeur de la colonne unique sera plus petite que la largeur déclarée.

Cette propriété vous aide à créer des mises en page réactives adaptées à différentes tailles d'écran. En particulier, en présence de la propriété column-count (qui a la priorité), vous devez définir toutes les longueurs 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.

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

css

/* 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;

La propriété column-width est définie par l'une des valeurs listées ci‑dessous.

Valeurs

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

Définition formelle

Valeur initiale	`auto`
Applicabilité	Block containers except table wrapper boxes
Héritée	non
Valeur calculée	`auto` if specified as `auto`, otherwise for `<length>` the absolute value specified
Type d'animation	by computed value type

Syntaxe formelle

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

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

Exemples

Définir la largeur de colonne en pixels

HTML

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>