Comprendre la grille CSS : créer un conteneur de grille

C'est le début d'une nouvelle série ici à Smashing Magazine se concentrant sur CSS Grid Layout. Bien que Grid soit disponible dans les navigateurs depuis 2017, de nombreux développeurs n'auront pas encore eu l'occasion de l'utiliser sur un projet. Il semble y avoir beaucoup de nouvelles propriétés et valeurs associées à CSS Grid Layout. Cela peut le rendre écrasant. Cependant, bon nombre des détails de la spécification alternent les façons de faire les choses, ce qui signifie que vous n'avez pas besoin d'apprendre l'intégralité de la spécification pour commencer. Cette série vise à vous faire passer du novice à l'expert de la grille - avec de nombreux conseils d'utilisation pratiques en cours de route.

Cet article initial couvrira ce qui se passe lorsque vous créez un conteneur de grille et les différentes propriétés que vous pouvez utiliser sur l'élément parent pour contrôler cette grille. Vous découvrirez qu'il existe plusieurs cas d'utilisation qui ne sont remplis qu'avec les propriétés que vous appliquez au conteneur de grille.

Dans cet article, nous aborderons :

• Création d'un conteneur de grille avec display: grid ou display: inline-grid ,
• Configuration des colonnes et des lignes avec grid-template-columns et grid-template-rows ,

• Contrôle de la taille des pistes implicites avec grid-auto-columns et grid-auto-rows .

• Partie 1 : Création d'un conteneur de grille

• Partie 2 : Lignes de quadrillage

• Partie 3 : Zones de modèle de grille

Création d'un conteneur de grille

Grid, comme Flexbox, est une valeur de la propriété display CSS. Par conséquent, pour indiquer au navigateur que vous souhaitez utiliser la disposition en grille, vous utilisez display: grid . Cela fait, le navigateur vous donnera une boîte au niveau du bloc sur l'élément avec display: grid et tous les enfants directs commenceront à participer à un contexte de formatage de grille . Cela signifie qu'ils se comportent comme des éléments de grille, plutôt que comme des éléments de bloc et en ligne normaux.

Cependant, vous ne verrez peut-être pas immédiatement une différence sur votre page. Comme vous n'avez créé aucune ligne ou colonne, vous avez une grille à une colonne. Suffisamment de lignes sont générées pour contenir tous vos enfants directs, et ils s'affichent les uns après les autres dans cette seule colonne. Visuellement, ils ressemblent à des éléments de bloc.

Vous verrez une différence si vous aviez une chaîne de texte, non enveloppée dans un élément, et un enfant direct du conteneur de grille, car la chaîne sera enveloppée dans un élément anonyme et deviendra un élément de grille. Tout élément qui est normalement un élément en ligne, comme un span, deviendra également un élément de grille une fois que son parent est un conteneur de grille.

L'exemple ci-dessous comporte deux éléments de niveau bloc, plus une chaîne de texte avec une étendue au milieu de la chaîne. Nous nous retrouvons avec cinq éléments de grille :

• Les deux éléments div ,
• La chaîne de texte avant le span,
• L'envergure,
• La chaîne de texte après la plage.

Si vous inspectez la grille à l'aide de Firefox Grid Inspector, vous pouvez voir les pistes à cinq rangées qui ont été créées pour les éléments.

Vous pouvez également créer une grille en ligne en utilisant display: inline-grid ; dans ce cas, votre conteneur de grille devient une boîte de niveau en ligne. Cependant, les enfants directs sont toujours des éléments de grille et se comportent de la même manière que les éléments de grille à l'intérieur d'une boîte de niveau bloc (il s'agit uniquement du type d'affichage externe). C'est pourquoi le conteneur de grille se comporte comme ci-dessus lorsqu'il se trouve à côté d'autres cases sur la page.

Cet exemple suivant a une grille suivie d'une chaîne de texte, car il s'agit d'une grille de niveau ligne, le texte peut s'afficher à côté. Les éléments de niveau en ligne ne s'étirent pas pour occuper tout l'espace dans la dimension en ligne comme le font les éléments de niveau bloc.

Note : À l'avenir, nous pourrons mieux décrire notre mise en page en utilisant display: block grid afin de créer notre conteneur de niveau bloc, et display: inline grid pour créer un conteneur de niveau inline. Vous pouvez en savoir plus sur cette modification de la spécification d'affichage dans mon article, "Digging Into The DISplay Property: The Two Values ​​Of Display".

Colonnes et lignes

Pour obtenir quelque chose qui ressemble à une grille, nous devrons ajouter des colonnes et des lignes. Ceux-ci sont créés à l'aide des propriétés grid-template-columns et grid-template-rows . Ces propriétés sont définies dans la spécification comme acceptant une valeur appelée track-list .

Ces propriétés spécifient, sous la forme d'une liste de pistes séparées par des espaces, les noms de ligne et les fonctions de dimensionnement des pistes de la grille. La propriété grid-template-columns spécifie la liste des pistes pour les colonnes de la grille, tandis que grid-template-rows spécifie la liste des pistes pour les lignes de la grille.

Certaines valeurs de liste de pistes valides sont les suivantes :

Comme vous pouvez le constater, il existe de nombreuses façons de créer une liste de pistes ! Voyons exactement comment tout cela fonctionne, avec quelques conseils sur la raison pour laquelle vous pourriez les utiliser.

Utilisation des unités de longueur

Vous pouvez utiliser n'importe quelle unité de longueur ou un pourcentage pour créer vos pistes. Si la taille des pistes est inférieure à celle disponible dans le conteneur de la grille, les pistes s'aligneront par défaut au début du conteneur et l'espace libre ira à la fin. C'est parce que la valeur par défaut de align-content et justify-content est start . Vous pouvez espacer les pistes de la grille, ou les déplacer à la fin du conteneur en utilisant les propriétés d'alignement, que j'explique en détail dans mon article "Comment aligner les choses en CSS".

Vous pouvez également utiliser les mots-clés min-content , max-content et fit-content() . L'utilisation min-content vous donnera une piste aussi petite que possible sans provoquer de débordement. Par conséquent, lorsqu'il est utilisé comme taille de colonne, le contenu s'enroulera doucement dans la mesure du possible. La piste devient la taille du mot le plus long de la colonne ou du plus grand élément de taille fixe.

L'utilisation max-content empêchera le contenu de faire du soft-wrapping. Dans une colonne, toute chaîne de texte se déroulera, ce qui peut provoquer un débordement.

Le mot-clé fit-content ne peut être utilisé qu'en transmettant une valeur. Cette valeur devient le maximum auquel cette piste atteindra. Par conséquent, la piste agira comme max-content avec le contenu se déroulant et s'étirant jusqu'à ce qu'il atteigne la valeur que vous avez transmise. À ce stade, il commencera à s'enrouler normalement. Ainsi, votre piste peut être plus petite que la valeur que vous transmettez, mais jamais plus grande.

Vous pouvez en savoir plus sur le dimensionnement dans Grid et d'autres méthodes de mise en page dans mon article "How Big Is That Box?" Comprendre le dimensionnement dans la mise en page CSS ».

Si vous vous retrouvez avec des pistes qui prennent plus de place que vous n'en avez dans votre conteneur, elles déborderont. Si vous utilisez des pourcentages, comme pour les mises en page flottantes ou flexibles basées sur des pourcentages, vous devrez veiller à ce que le pourcentage total ne dépasse pas 100 % si vous souhaitez éviter les débordements.

L'unité fr

Grid Layout inclut une méthode qui peut vous éviter de calculer vous-même des pourcentages - le dimensionnement des pistes avec l'unité fr . Cette unité n'est pas une longueur, et ne peut donc pas être combinée avec calc() ; c'est une unité flexible et représente l'espace disponible dans le conteneur de la grille.

Cela signifie qu'avec une track-list de 1fr 1fr 1fr ; l'espace disponible est divisé en trois et partagé équitablement entre les pistes. Avec une liste de pistes de 2fr 1fr 1fr , l'espace disponible est divisé en quatre et deux parties sont attribuées à la piste une — une partie chacune aux pistes deux et trois.

Une chose à laquelle il faut faire attention est que ce qui est partagé par défaut est l'espace disponible qui n'est pas l'espace total dans le conteneur. Si l'une de vos pistes contient un élément de taille fixe ou un mot long qui ne peut pas être encapsulé, celui-ci sera mis en page avant que l'espace ne soit partagé.

Dans l'exemple suivant, j'ai supprimé les espaces entre les mots de ItemThree . Cela a créé une longue chaîne insécable afin que la distribution de l'espace se produise après la prise en compte de la disposition de cet élément.

Vous pouvez mélanger l'unité fr avec des pistes de longueur fixe, et c'est là que cela devient très utile. Par exemple, vous pourriez avoir un composant avec deux colonnes de taille fixe et une zone centrale qui s'étire :

Vous pouvez avoir un composant avec une piste définie sur fit-content(300px) et l'autre sur 1fr. Cela donne un composant qui peut avoir quelque chose de plus petit que 300 pixels dans la première piste, auquel cas il ne prend que l'espace dont il a besoin et l'unité fr s'agrandit pour occuper le reste de l'espace.

Si vous ajoutez quelque chose de plus grand (comme une image avec max-width: 100% ), la première piste cessera de croître à 300px et l'unité fr prendra le reste de l'espace. Mélanger l'unité fr avec fit-content est un moyen de créer des composants très flexibles pour votre site.

La fonction répéter()

L'utilisation repeat() dans votre liste de pistes peut vous éviter de taper la ou les mêmes valeurs encore et encore. Par exemple, les deux lignes suivantes sont identiques :

 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(12, 1fr);

Lors de l'utilisation de repeat() , la valeur avant la virgule est le nombre de fois pour répéter la liste des pistes qui vient après la virgule. Cette liste de pistes peut avoir plusieurs valeurs. Cela signifie que vous pouvez répéter un motif de pistes.

Vous pouvez utiliser la fonction repeat() pour une partie d'une liste de pistes. Par exemple, la ligne suivante vous donnera une piste 1fr, 3 pistes 200px et une piste finale 1fr.

 grid-template-columns: 1fr repeat(3,200px) 1fr

En plus d'un nombre avant la virgule pour indiquer un nombre fixe de répétitions du motif, vous pouvez également utiliser les mots-clés auto-fill ou auto-fit . L'utilisation de l'un de ces mots-clés signifie qu'au lieu d'un nombre fixe de pistes, votre conteneur de grille sera rempli d'autant de pistes que possible.

L'utilisation d'une unité de longueur fixe signifie que, à moins que le conteneur ne puisse être exactement divisé par cette taille, vous vous retrouverez avec un peu d'espace disponible. Dans l'exemple ci-dessus, mon conteneur mesure 500 pixels de large, j'obtiens donc deux pistes de 200 pixels plus un espace à la fin.

Nous pouvons utiliser une autre fonction de grille pour rendre la valeur minimale, avec tout espace libre réparti sur toutes les pistes. La fonction minmax() prend une taille minimale et une taille maximale. Avec un minimum de 200px et un maximum de 1fr, nous obtenons autant de pistes de 200px que possible et comme le max est de 1fr, ce qui, nous le savons déjà, répartira l'espace de manière égale, le supplément est réparti sur les pistes.

J'ai mentionné qu'il y a deux mots-clés possibles : auto-fill et auto-fit . Si vous avez suffisamment de contenu pour remplir la première ligne de cellules, celles-ci se comporteront exactement de la même manière. Si, toutefois, vous ne le faites pas (par exemple, si nous supprimons tous les éléments sauf un à l'intérieur du conteneur ci-dessus), ils se comportent différemment.

L'utilisation auto-fill conservera la taille de piste disponible même s'il n'y a pas de contenu à y ajouter.

Si, à la place, vous utilisez auto-fit , les pistes vides seront réduites :

En utilisant Firefox Grid Inspector, vous pouvez voir que les pistes sont toujours là, mais ont été réduites à zéro. La ligne de fin de notre grille est toujours la ligne 3 car nous pouvons installer deux pistes.

Lignes nommées

Mon dernier exemple ci-dessus a utilisé l'approche des lignes nommées. Lors de l'utilisation de Grille. vous avez toujours des numéros de ligne, cependant, vous pouvez également nommer les lignes. Les lignes sont nommées entre crochets. Vous pouvez avoir plusieurs noms pour une ligne ; dans ce cas, un espace les sépare. Par exemple, dans la liste des pistes suivante, toutes mes lignes ont deux noms.

 grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

Vous pouvez nommer vos lignes comme bon vous semble, à l'exception du mot span , car il s'agit d'un mot réservé car il est utilisé lors du placement d'éléments sur la grille.

Remarque : Dans le prochain article de cette série, je parlerai davantage du placement basé sur les lignes et de la manière dont les lignes nommées sont utilisées. En attendant, lisez mon article sur « Naming Things in CSS Grid Layout » pour vous aider à en savoir plus sur le sujet.

La grille explicite contre la grille implicite

Lors de la création d'une grille à l'aide grid-template-columns et grid-template-rows avec une liste de pistes, vous créez ce que l'on appelle la grille explicite . Il s'agit de la grille que vous avez définie et qui a le dimensionnement que vous avez choisi pour chaque piste.

Si vous avez plus d'éléments qu'il n'en faut, ou si vous placez un élément de sorte qu'il tombe en dehors des limites de la grille que vous avez créée, Grid créera des pistes dans la grille implicite . Ces pistes implicites seront dimensionnées automatiquement par défaut. Nous avons vu cette grille implicite en action lorsque j'ai déclaré display: grid sur l'élément parent et grid a créé des lignes, une pour chaque élément. Je n'ai pas défini ces lignes, mais comme il y avait des éléments de grille, les pistes de ligne ont été créées pour leur donner un endroit où aller.

Vous pouvez définir une taille pour les lignes ou les colonnes implicites à l'aide des propriétés grid-auto-rows ou grid-auto-columns . Ces propriétés prennent une liste de pistes, donc si vous voulez que toutes les colonnes implicites mesurent au moins 200 pixels de haut mais augmentent s'il y a plus de contenu, vous pouvez utiliser ce qui suit :

 grid-auto-rows: minmax(200px, auto)

Si vous souhaitez que la première ligne implicite soit dimensionnée automatiquement, et que la seconde soit dimensionnée min-content minimal, et ainsi de suite (jusqu'à ce que tous les éléments de la grille aient été pris en compte), vous pouvez transmettre plusieurs valeurs :

grid-auto-rows: auto 100px

Utilisation d'une grille avec placement automatique

Créer une grille (et permettre au navigateur de placer automatiquement des éléments) vous permet d'obtenir un long chemin en termes de modèles utiles que vous pouvez obtenir. Nous n'avons pas encore envisagé de placer des éléments sur la grille, mais de nombreuses mises en page qui utilisent la grille ne font aucun placement. Ils s'appuient simplement sur le placement des éléments dans l'ordre des sources - un dans chaque cellule de la grille.

Si vous débutez avec CSS Grid, jouer avec différentes tailles de piste et voir comment les éléments se placent dans les cellules que vous créez est un excellent moyen de commencer.

• Partie 1 : Création d'un conteneur de grille
• Partie 2 : Lignes de quadrillage
• Partie 3 : Zones de modèle de grille