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.

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

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

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 Level 4
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.
Version de travail Définition initiale.

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 50
Support complet 50
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 50
Support complet 50
Support complet 1.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 10Opera Support complet 11.1Safari Support complet 3
Préfixée
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet OuiChrome Android Support complet 50
Support complet 50
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 50
Support complet 50
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet 5.0
Support complet 5.0
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Intrinsic sizes
Expérimentale
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?
On display: table-captionChrome Support complet OuiEdge Support complet OuiFirefox Support complet 37IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet 50Edge Mobile Support complet OuiFirefox Android Support complet 37Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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