Column-span - Propriété CSS
Résumé des caractéristiques de la propriété column-span
none
| all
none
column-span
passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de column-span
.
column-span
.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
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 d'animation pour la propriété column-span
.
L'animation est appliquée au titre h3 ci-dessus (Exemple d'animation...).
Sa largeur doit donc osciller entre la largeur d'une colonne, et la largeur totale des trois colonnes.
On voit que l'animation de la propriété column-span
n'est pas très intéressante, l'effet visuel produit
étant peu satisfaisant.
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é).

Compatibilité des navigateurs avec column-span
.
column-span
pour mettre un élément à cheval sur plusieurs colonnes.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
.
multi colonnes
column-span
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini
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, dontcolumn-span
.23 Juin 1999Document de travail.17 Décembre 2009Candidat à 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 :