columns - Propriété CSS
Résumé des caractéristiques de la propriété columns
auto
auto
columns
passe d'une valeur à l'autre sans transition.La propriété columns
.
La propriété CSS columns
permet de mettre en œuvre, de façon très simple, une mise en page en colonnes :
elle définit la largeur minimale et le nombre maximal de colonnes.
Cette propriété est donc un raccourci pour les deux propriétés CSS suivantes :
column-width
: largeur des colonnes.column-count
: nombre de colonnes.
La propriété columns
répartit le contenu de l'élément sur le nombre de colonnes indiqué.
La répartition se fait par défaut pour équilibrer au mieux la hauteur des colonnes.
Si toutefois cela conduit à des colonnes moins larges que la largeur indiquée, le navigateur réduit automatiquement le nombre de colonnes.
On peut donc très simplement créer des mises en page qui s'adaptent à la taille de l'écran (sensitive) est sans faire appel aux media-queries
.
Syntaxes pour columns
.
length
est une valeur numérique, positive, suivie d'une unité de dimension.
integer
est un nombre entier sans unité. il doit être égal ou supérieur à 1.
- columns: auto;
Valeur par défaut. Le navigateur affiche le contenu sur une seule colonne.
- columns: 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 CSS de dimension). Les pourcentages ne sont pas autorisés.
- columns: 3;
Sans contraintes supplémentaires, le navigateur affichera l'élément sur le nombre de colonnes indiqué.
La valeur doit être un nombre positif sans unité. - columns: 200px 3;
Lorsque deux valeurs sont indiquées, la première doit être une dimension et correspond à la largeur minimale des colonnes. En fonction de la place disponible et du nombre de colonnes demandé, les colonnes peuvent être plus larges.
La deuxième valeur est un nombre entier sans unité qui indique le nombre maximum de colonnes, mais, en fonction de la place disponible et de la largeur demandée, le navigateur peut en afficher moins.
La valeur initiale est :
.auto
Généralités sur la mise en page en colonnes.
Le colonage, ou mise en page en colonnes, consiste à répartir le contenu d'un élément sur plusieurs colonnes. La répartition de ce contenu entre les colonnes étant automatique, et visant en général, à équilibrer la hauteur des colonnes.
L'image ci-dessous montre à quoi va ressembler un bloc de texte disposé en colonnes. Il s'agit bien d'un seul élément et non pas de trois éléments qui auraient été disposés côte à côte, comme ce serait le cas avec des éléments flottants, un flex-box ou une grille.
Cet exemple fait bien apparaître les constituants d'un présentation en colonnes :
- La largeur des colonnes, définies par la propriété
column-width
. Toutes les colonnes ont la même largeur. - L'espace entre les colonnes, dénommé gap en anglais ou gouttière en français,
est ajusté par la propriété
column-gap
. - Un trait de séparation éventuel entre les colonnes, dénommé rule en anglais. Il est défini par la propriété résumée
column-rule
ou les propriétés individuelles correspondantes :column-rule-color
,column-rule-style
, etc.
Sauts de colonne.
Par défaut le navigateur tente de répartir le texte de la façon la plus égale possible entre les
colonnes. Celles-ci doivent donc avoir à peu près toutes la même longueur.
Il est toutefois possible de gérer l'équilibrage des colonnes avec la propriété column-fill
.
Il est également possible de positionner manuellement les sauts de colonne avec les propriétés
break-before
ou break-after
.
Chevauchements.
Il faut connaître aussi la propriété column-span
qui permet à un élément interne de s'étendre
sur l'ensemble des colonnes (par exemple un titre ou une image).
Titre chevauchant toutes les colonnes
Sens d'écriture.
La disposition et l'orientation des colonnes sont bien entendu influencées par le sens d'écriture (langues CJK, arabes...).
writing-mode
:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Débordements.
Lorsqu'un élément a une largeur définie plus grande que la largeur de la colonne, il déborde sur la ou les colonnes voisines.
Pour éviter cela on peut définir la largeur maximale de cet élément à 100%
.
Animation de la propriété columns
.
Reportez vous aux propriétés individuelles pour des exemples d'animation. Mais il est rare d'animer les propriétés relatives à la mise en page en colonnes.
Simulateur.
Choisissez les deux paramètres pour columns
(largeur de colonne minimal et nombre de colonnes maximal).
Vous pouvez ensuite ajuster la largeur de la fenêtre de votre navigateur pour voir évoluer la largeur et le nombre
de colonnes.
Prise en charge par les navigateurs (compatibilité).
La mise en page sur plusieurs colonnes est relativement bien prise en charge par les navigateurs actuels, bien que certaines fonctionnalités
posent encore des problèmes (ce qui explique que la première colonne du tableau ci-dessous ne soit pas entièrement verte).
Mais la propriété columns
est bien reconnue.
columns
.
columns
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que columns
.
Les spécifications CSS éditées par le W3C sont organisées en modules. columns
fait partie du Module CSS - Mise en page multi-colonnes (CSS Multi-column Layout Module). Les définitions suivantes sont également décrites dans ce même module.