Publié le 14 janvier 2026
À partir de Chrome 145, les propriétés column-wrap et column-height de la spécification de niveau 2 de la mise en page multicolonne sont acceptées.
Ces propriétés vous permettent de renvoyer les colonnes à la ligne dans le sens du bloc.
Avant Chrome 145, si la hauteur du conteneur multicol était limitée, le contenu qui ne tenait pas dans l'espace disponible apparaissait sous forme de colonnes de dépassement dans le sens inline. Cela créerait une barre de défilement horizontale sur le Web.
Les propriétés column-height et column-wrap vous permettent de définir la hauteur de la ligne de colonnes et de faire apparaître les colonnes en trop sur une nouvelle ligne.
La possibilité de créer des lignes de colonnes permet de contourner la situation actuelle, où vous devez choisir entre faire défiler les colonnes de haut en bas pour les lire ou risquer d'afficher une barre de défilement horizontale dans les situations où la quantité de contenu est imprévisible.
Il permet également de créer des mises en page telles qu'un carrousel de direction de bloc, où des colonnes sont créées pour remplir la hauteur de la fenêtre d'affichage disponible. Pour lire la ligne de colonnes suivante, faites défiler l'écran suivant dans le sens du bloc.
Créer une expérience de lecture claire
Avec plusieurs lignes de colonnes, il est possible de créer une expérience de lecture peu claire, où le lecteur ne se rend pas compte qu'il y a plusieurs lignes et saute l'espace vide pour continuer à lire la colonne. C'est un élément à prendre en compte dans la conception de votre UI. La possibilité d'ajouter des décorations dans l'espace entre les lignes vous donnera un outil supplémentaire pour créer cette distinction visuelle.
Les règles de ligne seront bientôt disponibles
La spécification multicol de niveau 1 inclut des propriétés permettant de styliser une règle de colonne. Cette règle est placée dans l'espace entre les colonnes. Les propriétés permettant de définir des règles de style pour les lignes sont incluses dans la nouvelle spécification CSS Gap Decorations, actuellement en version bêta pour les développeurs. Une fois cette fonctionnalité stabilisée, vous pourrez ajouter des règles de lignes et de colonnes dans les grilles, les flexbox et les multicolonnes.