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.

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

Compatibilité des navigateurs