La propriété column-width permet de suggérer une largeur de colonne minimale. 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.

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

/* Valeurs de longueur */
/* Type <length>       */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

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

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.

Valeur initialeauto
ApplicabilitéBlock containers except table wrapper boxes
Héritéenon
Médiavisuel
Valeur calculéela valeur absolue valant zéro ou plus
Type d'animationune longueur
Ordre canoniqueselon la grammaire

Syntaxe

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

Syntaxe formelle

<length> | auto

Exemples

CSS

.content-box {
  border: 10px solid #0ff;
  
  -webkit-column-width: 100px;
  -moz-column-width: 100px;
  column-width: 100px;
}

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

Spécification État Commentaires
CSS Writing Modes Module Level 3
La définition de 'column-width' dans cette spécification.
Candidat au statut de recommandation Ajoutes des tailles intrinsèques grâce aux mots-clés min-content, max-content, fill-available et fit-content.
CSS Multi-column Layout Module
La définition de 'column-width' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

50

Oui -webkit-

Oui

Oui -webkit-

50

1.5 -moz-

1011.13 -webkit-
Intrinsic sizes Non ? Non Non Non Non
On display: table-caption Oui Oui37 Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Oui

50

Oui -webkit-

Oui

Oui -webkit-

50

1 -moz-

Oui Oui Oui
Intrinsic sizes Non ? ? Non Non Non Non
On display: table-caption Oui50 Oui37 Oui Oui Oui

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
 Dernière mise à jour par : SphinxKnight,