Column-width - Propriété CSS

(1) Les pourcentages ne sont pas autorisés car cela figerait le nombre de colonnes (50% signifie forcément deux colonnes). Alors que la propriété column-width définit une largeur minimale pour les colonnes, le nombre de colonnes étant variable.

Schéma de la syntaxe de column-width.

Schéma syntaxique de la propriété column-width.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.

Description des termes utilisés sur le schéma :

• length est une valeur numérique, positive ou nulle, suivie d'une des unités de dimension.

Description de la propriété column-width.

column-width définit la largeur des colonnes minimale, ce qui veut dire que, s'il y a de la place pour afficher des colonnes plus larges, le navigateur le fera.

Si on souhaite imposer une largeur de colonne bien précise, le seul moyen sera de définir également la largeur du conteneur et la largeur du gap.

Pour une présentation générale des mises en page sur plusieurs colonnes, et pour une gestion plus sensitive (auto-adaptation des colonnes à la taille de l'écran), reportez-vous à la propriété CSS columns.

Valeurs pour column-width.

• column-width: auto;

  Valeur par défaut. La largeur des colonnes est déterminées d'après le nombre de colonnes et la largeur disponible. Si le nombre de colonnes n'est pas défini non plus, le texte sera affiché sur une seule colonne de largeur 100%.

• column-width: 200px;

  Les colonnes auront une largeur minimale correspondant à la valeur indiquée. Toutefois, si la place disponible le permet, le navigateur peut afficher des colonnes plus larges.

  La valeur doit être un nombre positif et suive d'une unité de dimension (voir les unités de dimension). Les pourcentages ne sont pas autorisés.

• column-width: initial; (auto) column-width: inherit; column-width: revert; column-width: revertLayer; column-width: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de column-width.

Sur ce premier exemple, le nombre de colonnes (column-count) n'est pas défini. Le navigateur calcule donc le nombre de colonnes en divisant la largeur disponible par la largeur des colonnes. Cette dernière étant animée entre 300 et 600 pixels, le nombre de colonnes évolue en fonction.

Dans le deuxième exemple, le nombre de colonnes maximal column-count est fixé à 2. Dans son animation, le navigateur respecte cette contrainte.

Accéder à la propriété column-width par programme.

Modifier la largeur des colonnes en Javascript.

Voici comment modifier en Javascript la largeur des colonnes pour un élément el. Javascript accepte une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case plus courante en Javascript (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['column-width'] = '5cm'; // ou let el = document.getElementById('id'); el.style.columnWidth = '5cm';

Lire en Javascript la largeur des colonnes.

La propriété column-width doit avoir été affectée directement dans le code HTML avec l'attribut style et non pas en CSS, en passant par un sélecteur. La largeur de colonne est renvoyée dans l'unité utilisée pour la définir.

let el = document.getElementById('id'); let value = el.style['column-width']; // ou let el = document.getElementById('id'); let value = el.style.columnWidth;

Lire la valeur calculée de column-width en Javascript.

La valeur calculée résulte soit de l'application directe d'une valeur à la propriété column-width, soit du mécanisme d'héritage. La largeur de colonne est retournée en pixels, quelque soit l'unité choisie pour la définir.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('column-width');

Modifier la largeur des colonnes avec JQuery.


$('#id').css('column-width', '5cm');
// ou
$('#id').css('columnWidth', '5cm');


Lire la valeur calculée de la propriété column-width avec JQuery.

La lecture de la propriété peut se faire avec le code suivant. Comme en Javascript, la largeur est retournée en pixels, même si une unité différente a été utilisée pour la définir.

let value = $('#id').css('column-width');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous affichent soit la valeur telle qu'elle a été appliquée à la propriété, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de column-width. On constate en particulier que toutes les autres unités sont converties en pixels.

Exemple interactif avec la propriété column-width.

Ajustez la largeur des colonnes en modifiant la valeur dans la zone de saisie, et observez le résultat dans le cadre en dessous. On pourra noter que des colonnes trop étroites perturbent la justification du texte, en créant de grands espaces entre les mots, ou même, lorsque un seul mot tient dans la largeur de la colonne, en rendant la justification impossible.

Pour cette raison, nous avons fixée la valeur de hyphens à auto afin de mettre en place une césure automatique. Mais en dessous de 150 pixels, la mise en page est altérée et la lecture commence à être difficile.

Sur ce deuxième exemple, le nombre de colonnes maximal est fixé à 3 par la propriété column-count. Dans cet exemple, le nombre de colonnes n'est pas renseigné. Il vaut donc auto, la valeur initiale pour la propriété column-count. Le navigateur est libre d'imposer le nombre de colonnes demandées pour respecter leur largeur.

Compatibilité des navigateurs avec column-width.

La compatibilité de la mise en page multi-colonnes semble mauvaise mais c'est uniquement dû aux propriété de rupture break-before, etc.) qui sont mal reconnues.

Remarques :

(1) Ne supporte pas les valeurs avoid (dans le contexte d'une mise en page multi-colonnes), avoid-column et avoid-page pour les propriétés beak-after, break-before et break-inside.

(2) Ne supporte pas les valeurs break-after, break-before et break-inside.

1

Mise en page
multi colonnes

2

Propriété
column-width

Estimation de la prise en charge globale.

18%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

2

QQ Browser

2

Opéra Mobile

2

Firefox

2

Chrome

2

Safari

Edge

2

Opéra

2

Chrome pour Androïd

2

Safari sur IOS

Samsung Internet

2

UC Browser pour Androïd

2

Androïd Brower

2

Firefox pour Androïd

2

KaiOS Browser

2

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété column-width.

• Module CSS - Mise en page multi-colonnes - Niveau 1

  Cette spécification décrit la mise en page sur plusieurs colonnes. Il suffit de définir le nombre de colonnes sur le conteneur, et le contenu se disposera sur le nombre de colonnes indiqué. Bien entendu d'autres propriétés permettent d'agir plus finement sur les conteneur multi-colonnes.
  Cette spécification définit également des propriétés concernant l'espace entre les colonnes et le trait de séparation éventuel.

  Concernant column-width. Introduction des mises en page en colonnes, et des propriétés correspondantes, dont column-width.
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page multi-colonnes - Niveau 2

  Peu de nouveautés sur le niveau 2 de cette spécification. Notons simplement un pseudo-élément ::column qui permet de cibler les colonnes elles-mêmes (toutes les colonnes d'un seul coup). Il accepte peu de propriétés.

  Concernant column-width.
  

  19 Décembre 2024

  Document de travail.

  

  

  

Voir aussi, à propos des mises en page multi-colonnes.

La propriété column-width est référencée dans la spécification Module CSS - Mise en page multi-colonnes (Module CSS - Mise en page multi-colonnes), qui décrit tout ce qui concerne les mises en page multi-colonnes. Les termes ci-dessous sont également décrits dans cette même spécification :

Propriétés :