Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

columns - Propriété CSS

columns

Résumé des caractéristiques de la propriété columns

Description rapide
Définit les caractéristiques d'une mise en page sur plusieurs colonnes.
Statut
Standard
Type de valeur
Voir les propriétés individuelles.
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété columns passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page multi-colonnes
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

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 :

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.

Syntaxe de columnsSchéma syntaxique de la propriété CSS columns (mise en page sur plusieurs colonnes). auto auto length length integer integercolumns:;columns:;Télécharger l'image en SVG
  • 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.

  • columns: initial; columns: inherit; columns: revert; columns: revert-layer; columns: unset;

    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.

Disposition d'un élément sur plusieurs colonnes

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

Coactique aliquotiens nostri pedites ad eos perse quendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices vene rint summos, inter arta tamen et invia nullas acies explicare permissi nec fir­mare nisu valido gressus: hoste discur­satore rupium abscisa volvente, ruinis ponderum inmanium conster nuntur, aut ex neces­sitate ultima fortiter dimicante, superati peri­cu­lose per prona discedunt.
Image étendue sur 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 :

1
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%.

Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum. Image débordant sur la colonne suivante Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum in manium conster nuntur, aut ex necessitate ultima fortiter dimicante, superati peri­cu­lose per prona discedunt. Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspi raret, solisque scholis iussit esse contentum palatinis et protec torum cum.

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.

columns :
Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscur issimis. quam Constan tina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpo sitam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.

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.

Colonne 1
Support général des mises en page multi-colonnes par les navigateurs.
Colonne 2
Compatibilité des navigateurs avec la syntaxe de la propriété CSS columns.
1
Columns
2
columns
Estimation de la prise en charge en pourcentage du parc actuel.
21%
95%

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.

Propriétés.

Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
Gère la répartition du contenu entre les colonnes.
Définit tous les paramètres du trait de séparation entre les colonnes.
Définit la couleur des lignes de séparation de colonnes.
Choisit le type de trait pour la séparation des colonnes.
Définit l'épaisseur du trait de séparation entre les colonnes.
Gère le chevauchement du contenu sur plusieurs colonnes.
Définit la largeur des colonnes.