Quand et comment utiliser la disposition multicolonnes CSS
À propos de l'auteur
Rachel Andrew est non seulement la rédactrice en chef de Smashing Magazine, mais également une développeuse Web, une écrivaine et une conférencière. Elle est l'auteur de nombreux ouvrages, notamment… Pour en savoir plus sur Rachel
La spécification de disposition multi-colonnes est souvent négligée dans la mesure où nous utilisons Grid et Flexbox. Dans cet article, Rachel Andrew explique pourquoi elle est différente des autres méthodes de présentation et présente des modèles utiles et des sites qui la présentent bien.
Malgré tout l'enthousiasme suscité par CSS Grid Layout et Flexbox, une autre méthode de disposition est souvent négligée. Dans cet article, je vais jeter un oeil à la mise en page multi-colonnes, souvent appelée multicol ou parfois "colonnes CSS". Vous saurez à quelles tâches il convient et quelles sont les choses à surveiller lors de la création de colonnes.
Qu'est-ce que Multicol?
L'idée de base de multicol est que vous pouvez en prendre une grande partie. et le couler dans plusieurs colonnes, comme dans un journal. Vous faites cela en utilisant l'une des deux propriétés. La propriété column-count spécifie le nombre de colonnes dans lesquelles vous souhaitez insérer le contenu. La propriété column-width spécifie la largeur idéale, laissant au navigateur le choix du nombre de colonnes à insérer.
Les éléments contenus dans le contenu que vous transformez en conteneur multicol n'a pas d'importance. tout reste dans le flux normal, mais divisé en colonnes. Cela rend multicol contrairement aux autres méthodes de disposition que nous avons dans les navigateurs actuels. Flexbox et Grid, par exemple, prennent les éléments enfants du conteneur et ces éléments participent ensuite à une présentation Flex ou Grid. Avec multicol, vous avez toujours un flux normal, sauf à l'intérieur d'une colonne.
Dans l'exemple ci-dessous, j'utilise colonne-largeur pour afficher des colonnes d'au moins 14em . Multicol attribue autant de colonnes 14em qu'il lui en conviendra, puis partage l'espace restant entre les colonnes. Les colonnes auront au moins 14em à moins que nous ne puissions afficher qu'une seule colonne, auquel cas elle pourrait être plus petite. Multicol a été la première fois que nous voyions ce type de comportement en CSS, des colonnes étant créées qui étaient essentiellement responsive par défaut. Vous n'avez pas besoin d'ajouter des requêtes de média et de changer le nombre de colonnes pour différents points d'arrêt. Nous spécifions plutôt une largeur optimale et le navigateur y apportera une solution.
Les zones de colonnes créées lors de utiliser l'une des propriétés de la colonne ne peut pas être ciblé. Vous ne pouvez pas les adresser avec JavaScript, vous ne pouvez pas non plus styliser une boîte individuelle pour lui donner une couleur de fond ou ajuster le remplissage et les marges. Toutes les zones de colonnes auront la même taille. La seule chose à faire est d’ajouter une règle entre les colonnes, à l’aide de la propriété column-rule, qui agit comme une bordure. Vous pouvez également contrôler l'espace entre les colonnes à l'aide de la propriété column-gap dont la valeur par défaut est 1em mais vous pouvez le remplacer par une unité de longueur valide.
Telle est la fonctionnalité de base de multicol. Vous pouvez prendre un morceau de contenu et le diviser en colonnes. Le contenu remplira les colonnes à tour de rôle, créant des colonnes dans la direction intégrée. Vous pouvez contrôler les espaces entre les colonnes et ajouter une règle, avec les mêmes valeurs possibles que border. Jusqu'ici tout va bien, et tout ce qui précède est très bien supporté par les navigateurs depuis longtemps, rendant cette spécification très sûre à utiliser en termes de compatibilité ascendante.
Il y a quelques autres points que vous pouvez envisager. avec vos colonnes et certains problèmes potentiels à connaître lors de l’utilisation de colonnes sur le Web.
Spanning Columns
Vous pouvez parfois souhaiter diviser du contenu en colonnes, mais faire en sorte qu’un élément s’étende sur les zones de colonne. L'application de la propriété column-span à un descendant du conteneur multicol permet d'atteindre cet objectif
Dans l'exemple ci-dessous, j'ai fait en sorte qu'un élément
recouvre mes colonnes. Notez que lorsque vous procédez ainsi, le contenu se divise en un ensemble de zones situées au-dessus de la plage, puis commence un nouvel ensemble de zones de colonnes ci-dessous. Le contenu ne saute pas à travers l'élément étendu.
La propriété column-span est actuellement implémentée dans Firefox et se trouve derrière un indicateur de fonctionnalité.
Sachez que, dans la spécification actuelle, les valeurs de column-span ] sont tous ou néant . Vous ne pouvez pas couvrir certaines colonnes, mais vous pouvez obtenir le type de présentation que vous pouvez voir dans un journal en combinant multicol avec d’autres méthodes de présentation. Dans cet exemple, j'ai un conteneur de grille avec deux pistes de colonne. La voie de gauche est 2fr la voie de droite 1fr . L'article de la piste de gauche que j'ai transformée en un conteneur multicol avec deux pistes, comporte également un élément couvrant.
À droite, nous avons un côté qui entre dans la deuxième piste de colonne Grid. En jouant avec les différentes méthodes de disposition à notre disposition, nous pouvons déterminer quelle méthode convient le mieux au travail à accomplir – n'ayez pas peur de mélanger les deux!
Si vous avez un contenu contenant des en-têtes, vous souhaiterez probablement éviter la situation. où un titre finit par être la dernière chose dans une colonne avec le contenu allant dans la colonne suivante. Si vous avez des images avec des légendes, l'idéal serait que l'image et la légende restent comme une seule unité et ne soient pas divisées en colonnes. Pour faire face à ces problèmes, CSS possède des propriétés permettant de contrôler les endroits où le contenu est divisé.
Lorsque vous divisez votre contenu en colonnes, vous effectuez une opération appelée fragmentation. Il en va de même si vous divisez votre contenu entre plusieurs pages, par exemple lorsque vous créez une feuille de style pour un contexte d'impression. Par conséquent, multicol est plus proche du support pagé que des autres méthodes de disposition sur le Web. Pour cette raison, le contrôle des ruptures de contenu consiste depuis plusieurs années à utiliser les propriétés de saut de page qui faisaient partie de CSS2.1.
de saut de page avant
page-break-after
page-break-inside
Plus récemment, la spécification CSS Fragmentation a défini des propriétés de fragmentation conçues pour tous les contextes fragmentés. Cette spécification inclut des détails sur les supports paginés, multicol et les régions bloquées; Les régions fragmentent également un contenu continu. En rendant ces propriétés génériques, elles peuvent s'appliquer à tout contexte fragmenté futur, de la même manière que les propriétés d'alignement de Flexbox ont été déplacées dans la spécification Alignement de boîte afin de pouvoir être utilisées dans les dispositions Grille et Bloc.
break- avant
effraction après
effraction
Par exemple, j'ai utilisé l'effraction évitée sur l'élément
afin d'éviter que la légende ne se détache de l'image. Un navigateur prenant en charge devrait conserver les chiffres ensemble même si cela déséquilibrait les colonnes.
Malheureusement, la prise en charge de ces propriétés dans multicol est assez inégale. Même lorsqu'elles sont prises en charge, elles doivent être considérées comme une suggestion, car il serait possible de faire autant de demandes en essayant de contrôler les interruptions, ce qui signifie que le navigateur ne peut réellement pas naviguer dans n'importe quel endroit. La spécification définit bien les priorités dans ce cas, mais il est probablement plus utile de contrôler uniquement les cas les plus importants.
Le problème des colonnes sur le Web
L'une des raisons pour lesquelles nous n'imaginons pas que multicol est beaucoup utilisé sur le Web, il est très facile de se retrouver avec une expérience de lecture qui fait défiler le lecteur dans la dimension de bloc. Cela signifierait faire défiler verticalement vers le haut et le bas pour ceux d’entre nous qui utilisons l’anglais ou un autre mode d’écriture vertical.
Si vous corrigez la hauteur du conteneur, par exemple en utilisant l'unité d'affichage vh et que le contenu est trop volumineux, un débordement se produira dans la direction alignée. et ainsi vous obtenez une barre de défilement horizontale à la place.
Voir le stylo Smashing Multicol: colonnes de débordement de Rachel Andrew ( @ rachelandrew ) sur CodePen . [19659014] Aucune de ces choses-là n'est idéale, et l'utilisation de multicol sur le Web est une chose à laquelle nous devons réfléchir très soigneusement en termes de quantité de contenu que nous pourrions chercher à alimenter nos colonnes.
Colonnes de débordement de blocs [19659045] Pour le niveau 2 de la spécification, nous examinons comment activer une méthode permettant de créer des colonnes de débordement, celles qui entraînent actuellement la barre de défilement horizontale, dans le sens bloc. Cela signifierait que vous pourriez avoir un conteneur multicol avec une hauteur, et une fois que le contenu aurait créé les colonnes qui rempliraient ce conteneur, un nouvel ensemble de colonnes serait créé ci-dessous. Cela ressemblerait un peu à notre exemple ci-dessus, cependant, au lieu d'avoir une clé qui provoque le démarrage des nouvelles boîtes de colonne, ce serait le débordement provoqué par un conteneur avec une restriction dans la dimension du bloc.
multicol bien plus utile pour le web. Bien que nous soyons un peu à l’écart en ce moment, vous pouvez garder un œil sur dans le rapport du groupe de travail CSS . Si vous avez d'autres cas d'utilisation de cette fonctionnalité, vous pouvez vraiment les utiliser lors de la conception de la nouvelle fonctionnalité.
Qu'est-ce que Multicol est utile pour aujourd'hui?
Avec la spécification actuelle, divisez tout votre contenu en colonnes sans considération. pour les problèmes de défilement n'est pas conseillé. Cependant, dans certains cas, multicol est idéal sur le Web. Il existe suffisamment de cas d'utilisation pour en faire quelque chose que vous devriez prendre en compte lorsque vous examinez des modèles de conception.
Réduire les petites UI ou les éléments de texte
Multicol peut être utile partout où vous avez une petite liste d'éléments à prendre. up moins d'espace. Par exemple, une simple liste de cases à cocher ou une liste de noms. Souvent, dans ces scénarios, le visiteur ne lit pas une colonne, puis retourne au début de la suivante, mais recherche dans le contenu une case à cocher ou un élément à sélectionner. Même si vous créez une expérience de défilement, cela ne posera peut-être pas de problème.
Il arrive que nous concevions un site où nous savons qu'un élément de contenu est relativement petit et s'adapte à la plupart des écrans sans provoquer de défilement non souhaité. J'ai utilisé multicol sur Les pages de présentation notiste pour l'introduction d'un exposé.
Andy Clarke a conçu un bel exemple pour le site Web d'Equfund . 19659057] Une mise en page à deux colonnes comprenant du contenu varié « /> Sur le site Web Equfund, vous pouvez voir comment différents éléments HTML restent dans le flux normal lorsqu'ils sont affichés dans des colonnes. ( Source de l'image ) ( Grand aperçu )
Pour éviter le risque de défilement sur de très petits écrans, souvenez-vous que vous pouvez utiliser des requêtes de support pour vérifier la hauteur ainsi que la largeur (ou dans un monde logique, en mode bloc ou en ligne). Si vous n'activez que les colonnes situées à un point d'arrêt dont le hauteur minimale est assez grand pour leur contenu, les utilisateurs de très petits périphériques ayant une expérience de défilement médiocre peuvent éviter les opérations.
Affichage du contenu similaire à une maçonnerie [19659045] Un autre endroit où la disposition en plusieurs colonnes fonctionne à merveille est si vous souhaitez créer un type d'affichage du contenu en maçonnerie. Multicol est la seule méthode de mise en page permettant de créer ce type de mise en page avec des éléments de hauteur inégale. Grid laisserait un espace vide ou utiliserait les éléments pour former une grille strictement bidimensionnelle.
Dans cette conception de Veerle Pieters, multicol est utilisé pour mettre en page plusieurs boîtes ou cartes sous forme de colonnes. ( Grand aperçu )
Réponditions de grille et de boîte flexible
Les propriétés de colonne - peuvent également être utilisées comme solution de secours pour les structures Grid et Flex. Si vous spécifiez l'une des propriétés d'un conteneur, transformez ce dernier en structure Flex ou Grille en utilisant display: flex ou display: grid tout comportement de colonne sera supprimé. Si vous avez, par exemple, une disposition de cartes qui utilise la disposition de la grille et que la disposition est lisible si elle s’exécute en colonnes plutôt qu’au travers de la page, vous pouvez utiliser multicol comme solution de secours simple. Les navigateurs qui ne prennent pas en charge Grid obtiendront l’affichage multicol, ceux qui prendront en charge Grid recevront la présentation de la grille.
N'oubliez pas Multicol!
Assez souvent, je réponds aux questions Grid et Flexbox dans lesquelles il est recommandé de ne pas utiliser Grid. ou Flexbox, mais au lieu de regarder Multicol. Vous ne l'utiliserez probablement pas sur tous les sites, mais lorsque vous rencontrez un cas d'utilisation, cela peut s'avérer très utile. Sur MDN, il existe des ressources utiles pour multicol et les propriétés de fragmentation associées .
Si vous avez utilisé multicol sur un projet, laissez peut-être une note dans les commentaires pour en partager d'autres. façons dont nous pouvons utiliser la fonction.
(il)