Column-span - Propriété CSS

Schéma de la syntaxe de column-span.

Description de la propriété column-span.

column-span définit si un élément s'étend sur l'ensemble des colonnes, ou bien s'il est contenu dans une seule des colonnes. Cette propriété s'applique dans le cas d'une mise en page en colonnes. Elle ne s'applique pas aux grilles ni aux tableaux.

Voici le genre de mise en page qu'il est possible d'obtenir avec la propriété column-span, appliquée ici à un titre. On notera que, si des lignes de séparation de colonnes sont affichées, elles seront interrompues à l'endroit de l'élément étendu sur toutes les colonnes.

column-span doit être appliquée à une balise de type block. On ne peut donc pas l'appliquer directement à une image, mais il est facile d'insérer cette image dans un paragraphe ou un autre élément bloc.

Il n'est pas possible d'étendre un élément sur certaines colonnes seulement : l'élément sera soit dans une colonne seulement, soit s'étendra sur toutes les colonnes.

Si un élément s'étend sur toutes les colonnes, le contenu qui précède et celui qui suit sont répartis entre les colonnes de la façon la plus équilibrée possible.

Valeurs pour column-span.

• column-span: none;

  Valeur par défaut. L'élément reste sur la largeur d'une seule colonne.

  Ce texte occupe 3 colonnes. Le premier élément (en bleu) a reçu la propriété column-span:none. Il est donc limité à la taille d'une seule colonne.
• column-span: all;

  L'élément s'élargit jusqu'à couvrir la largeur de toutes les colonnes.

  Ce texte occupe 3 colonnes. Le premier élément (en bleu) a reçu la propriété column-span:none. Il est donc autorisé à s'étendre sur la largeur des trois colonnes.
• column-span: initial; (none) column-span: inherit; column-span: revert; column-span: revertLayer; column-span: unset;

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

Exemple d'animation de column-span.

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

Le simulateur ci-dessous applique la propriété column-span, avec la valeur choisie, aux deux titres en gras, et au paragraphe contenant l'image (le bandeau étoilé).

La largeur de colonne

Pour une meilleure lisibilité, les manuels typographiques suggèrent que les colonnes soient suffisamment larges pour contenir environ 60 caractères par ligne. Une formule suggère une largeur de colonne de 24 ems.

Les gouttières.

Les espaces à l'extérieur de la page (à gauche de la première colonne et à droite de la dernière colonnes) sont appelés marges, tandis l'espace entre deux colonnes est appelé gouttière. L'espace entre deux pages en regard peut être considéré comme une gouttière, car il y a des colonnes des deux côtés. Toute gouttière peut également être appelée marge, mais les marges extérieures et horizontales ne sont pas des gouttières.

Le contraste de colonne fait référence à la couleur globale ou à la grisaille établie par la colonne et peut être ajusté de plusieurs façons. La première à ajuster la relation entre la largeur et la hauteur de la colonne. Une autre méthode consiste à ajuster la police de caractères, la graisse, le style, et la taille et de l' interlignage.

Compatibilité des navigateurs avec column-span.

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-span

Estimation de la prise en charge globale.

18%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

1

QQ Browser

1

Opéra Mobile

1

Firefox

1

Chrome

1

Safari

Edge

1

Opéra

1

Chrome pour Androïd

1

Safari sur IOS

Samsung Internet

1

UC Browser pour Androïd

1

Androïd Brower

1

Firefox pour Androïd

1

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-span.

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

  Première spécification concernant la mise en page multi-colonnes.
  Introduction des propriétés correspondantes, dont column-span.
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

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

La propriété column-span est référencée dans la spécification CSS Multi-column Layout Module (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 :