Propriété CSS column-width

La propriété CSS column-width définit la largeur idéale de chaque colonne dans une mise en page multi-colonnes. Au lieu d'indiquer au navigateur combien de colonnes créer, vous lui indiquez la largeur souhaitée pour chaque colonne, et le navigateur détermine combien de colonnes tiennent dans l'espace disponible.

C'est l'approche inverse de column-count, où vous fixez le nombre de colonnes et laissez leur largeur varier. column-width est ce qui rend le texte multi-colonnes responsive par défaut : à mesure que le conteneur s'élargit, davantage de colonnes apparaissent ; à mesure qu'il se rétrécit, les colonnes disparaissent jusqu'à ce qu'il n'en reste qu'une seule.

La propriété column-width est l'une des propriétés CSS3.

Comment fonctionne column-width

La valeur est mieux comprise comme une largeur minimale souhaitée, et non comme une valeur stricte. Le navigateur insère autant de colonnes de (au moins) cette largeur que possible, puis les étire pour remplir l'espace restant.

Si le conteneur peut contenir plusieurs colonnes de la largeur donnée, vous obtenez plusieurs colonnes.
Si le conteneur est plus étroit que la valeur spécifiée, vous obtenez une seule colonne aussi large que le conteneur — la largeur ne déborde jamais du bloc.
Lorsque column-count est également défini, column-width devient une largeur maximale : le navigateur utilise la contrainte qui produit le moins de colonnes. Le raccourci pour définir les deux à la fois est columns.

Une façon approximative de prédire le résultat : nombre de colonnes ≈ floor(largeur du conteneur / (column-width + column-gap)). La valeur par défaut de column-gap est 1em.

Quand l'utiliser

Utilisez column-width lorsque vous souhaitez des longueurs de ligne lisibles qui s'adaptent au viewport — par exemple, pour faire couler un long article ou une liste d'éléments courts en colonnes style journal sans écrire de media queries. Comme le nombre de colonnes s'ajuste automatiquement, la même règle fonctionne sur un téléphone (une colonne) et sur un large bureau (trois ou quatre colonnes).

Info

Les navigateurs modernes prennent en charge column-width sans préfixes vendeur. La valeur par défaut auto signifie que la largeur de colonne est déterminée par d'autres propriétés telles que column-count, ou revient à une seule colonne si rien d'autre ne la contraint.

Valeur initiale	auto
S'applique à	Les conteneurs de blocs, sauf les boîtes d'emballage de tableau.
Hérité	Non.
Animable	Oui.
Version	CSS3
Syntaxe DOM	object.style.columnWidth = "5px";

Syntaxe

Syntaxe de la propriété CSS column-width

column-width: auto | length | initial | inherit;

Exemple de la propriété column-width :

Exemple de la propriété CSS column-width avec la propriété length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to 80px.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS column-width](https://api.w3docs.com/uploads/media/default/0001/03/5dc2724355e1e0cd7af891102d3b3d2c9e042376.png "Propriété CSS column-width" =420x)

Exemple de la propriété column-width avec la valeur « auto » :

Avec auto, le navigateur n'impose pas de largeur cible. Combinée avec column-count, elle laisse la règle de comptage décider de la mise en page ; seule, elle revient à une seule colonne.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to auto.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>

</html>

Essayez vous-même »

Colonnes responsive sans media queries

Comme le navigateur dérive le nombre de colonnes de la largeur disponible, une seule règle column-width produit une mise en page qui se réorganise d'elle-même. Ici, nous ajoutons également un column-gap et une column-rule pour la séparation. Redimensionnez l'aperçu pour voir les colonnes apparaître et disparaître.

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive columns</title>
    <style>
      .news {
        column-width: 14em;
        column-gap: 2em;
        column-rule: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="news">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Pièges courants

C'est une cible, pas une garantie. La largeur de colonne réellement rendue est rarement exactement la valeur que vous avez définie — le navigateur étire les colonnes pour remplir la ligne. Utilisez-la pour contrôler approximativement combien de colonnes apparaissent, pas leur largeur au pixel près.
column-width et column-count interagissent. Lorsque les deux sont présents, le navigateur traite column-width comme un maximum et ne dépasse jamais column-count. Ne définissez qu'une seule à moins de vouloir intentionnellement un plafond sur les deux axes.
Un contenu de grande hauteur peut déséquilibrer les colonnes. Utilisez column-fill pour contrôler comment le contenu est réparti entre les colonnes.
Les pourcentages ne sont pas autorisés. Contrairement à de nombreuses propriétés de largeur, column-width n'accepte qu'une longueur (px, em, ch, …) ou auto — pas %.

Valeurs

Valeur	Description	Essayer
auto	La largeur de la colonne est spécifiée par le navigateur. C'est la valeur par défaut.
length	La largeur des colonnes est spécifiée par une longueur.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite de la propriété de son élément parent.

Propriétés associées

column-count — fixe le nombre de colonnes plutôt que leur largeur.
columns — raccourci pour column-width et column-count.
column-gap — espace entre les colonnes.
column-rule — une ligne tracée entre les colonnes.
column-span — permet à un élément de s'étendre sur toutes les colonnes.

Pratique

Que fait la propriété 'column-width' en CSS ?

La propriété 'column-width' spécifie la largeur des colonnes dans une mise en page multi-colonnes.La propriété 'column-width' spécifie le nombre de colonnes dans une mise en page.La propriété 'column-width' spécifie la largeur de la fenêtre du navigateur.La propriété 'column-width' peut accepter des valeurs en 'px', 'em', 'rem' ou en pourcentage.La propriété 'column-width' spécifie la largeur préférée pour les colonnes.