column-width

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é column-width définit une largeur de colonne idéale lorsqu'on utilise une disposition en colonnes. Aussi, on aura le plus de colonnes possible et pour lesquelles aucune n'est moins large que column-width. La colonne réelle peut être plus petite que cette taille si son conteneur est moins large que cette valeur.

Exemple interactif

Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px. Ce réglage permet donc d'obtenir des effets qui s'adaptent aux différentes tailles d'écrans. Manipulée avec la propriété column-count qui a la précédence, il est nécessaire de définir toutes les valeurs de longueur pour avoir une largeur de colonne CSS exacte. Pour du texte horizontal, ces propriétés sont width, column-width, column-gap et column-rule-width.

Syntaxe

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

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

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

Valeurs

<length>

Une valeur de longueur (type <length>) qui fournit une indication sur la largeur optimale d'une colonne. La colonne réelle peut être plus large que cette longueur (pour remplir l'espace disponible) ou plus étroite (uniquement si l'espace disponible est inférieur à la largeur indiquée). La longueur exprimée doit être strictement positive sinon la déclaration est considérée invalide. Les valeurs exprimées en pourcentages sont 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 initialeauto
ApplicabilitéBlock containers except table wrapper boxes
Héritéenon
Valeur calculéela valeur absolue valant zéro ou plus
Type d'animationune longueur

Syntaxe formelle

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

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

Exemples

CSS

css
.content-box {
  border: 10px solid #0ff;

  -webkit-column-width: 100px;
  -moz-column-width: 100px;
  column-width: 100px;
}

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>

Résultat

Spécifications

Specification
CSS Box Sizing Module Level 3
# column-sizing
CSS Multi-column Layout Module Level 1
# cw

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-width
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi