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 :

CSS - Propriété columns

Description de la propriété columns.

columns 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 :

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.

  • columns: auto;

    Valeur par défaut. Le navigateur affiche le contenu sur une seule colonne.

  • columns: 100px 3;

    Deux valeurs numériques, séparées par un espace.
    La première valeur est un nombre positif ou égal à zéro (mais la valeur 0 n'a pas de sens), suivi d'une unité de dimension, (voir unités de dimensions en CSS). Cette valeur définit la largeur minimale des colonnes.
    La seconde valeur est un nombre supérieur à zéro, sans unité, qui définit le nombre maximal de colonnes.

  • columns: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Ajustez la largeur de la fenêtre 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 obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.

Voir aussi...

Colonnes multiples - Propriétés.

  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • column-count : Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
  • column-fill : Gère la répartition du contenu entre les colonnes.
  • column-gap : Définit l'espacement entre les colonnes.
  • column-rule : Définit tous les paramètres du trait de séparation entre les colonnes.
  • column-rule-color : Définit la couleur des lignes de séparation de colonnes.
  • column-rule-style : Choisit le type de trait pour la séparation des colonnes.
  • column-rule-width : Définit l'épaisseur du trait de séparation entre les colonnes.
  • column-span : Gère le chevauchement du contenu sur plusieurs colonnes.
  • column-width : Définit la largeur des colonnes.
  • orphans : Gestion des coupures en bas de page.
  • widows : Gestion des ruptures en haut de page.