column-width

La propriété column-width permet de suggérer une largeur de colonne optimale. Cette largeur représente la plus grande largeur que pourra occuper une colonne avant qu'une autre colonne soit ajoutée. 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ééléments non-remplacés de type block ou table, ou éléments de type table-cell ou inline-block
Héritéenon
Médiavisuel
Valeur calculéela valeur absolue valant zéro ou plus
Animableoui, comme une longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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

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

/* Global values */
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.
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é Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui)-webkit
50.0
1.5 (1.8)-moz 10 11.10 3.0 (522)-webkit
Dimensions intrinsèques Pas de support Pas de support Pas de support Pas de support Pas de support
effet sur : display: table-on, display: table-caption (Oui) 37 (37) (Oui) (Oui) (Oui)
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple (Oui) 50.0 1.0 (1.8)-moz (Oui) (Oui) (Oui)
Dimensions intrinsèques Pas de support ? Pas de support Pas de support Pas de support Pas de support
effet sur : display: table-on, display: table-caption (Oui) ? 37.0 (37) (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,