Création d'un conteneur de grille

Ceci est le début d'une nouvelle série ici au Smashing Magazine se concentrant sur Disposition de la grille CSS. 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 à la disposition de la grille CSS. Cela peut sembler écrasant. Cependant, une grande partie des détails de la spécification alternent les façons de faire, ce qui signifie que vous n'avez pas besoin d'apprendre la spécification entière pour commencer. Cette série vise à vous faire passer du débutant à l'expert de la grille – avec de nombreux conseils d'utilisation pratiques.

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

Dans cet article, nous allons couvrir:

• Création d'un conteneur de grille avec display: grid ou affichage: grille en ligne
• Configuration de colonnes et de lignes avec grille-modèle-colonnes et grille-modèle-lignes [19659008] Contrôle de la taille des pistes implicites avec grille-auto-colonnes et grille-auto-lignes .

Création d'un conteneur de grille

La grille, comme Flexbox, est une valeur de la propriété CSS display . Par conséquent, pour indiquer au navigateur que vous souhaitez utiliser la disposition de la grille, vous utilisez display: grid . Cela fait, le navigateur vous donnera une zone de niveau 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 disposez d'une grille à une colonne. Assez de lignes sont générées pour contenir tous vos enfants directs, et elles s'affichent l'une après l'autre 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 encapsulée dans un élément, et un enfant direct du conteneur de grille, car la chaîne sera encapsulée dans un élément anonyme et devenir un élément de la grille. Tout élément qui est normalement un élément en ligne, tel qu'une étendue, deviendra également un élément de grille une fois que son parent sera un conteneur de grille.

L'exemple ci-dessous a deux éléments de niveau bloc, plus une chaîne de texte avec une étendue dans 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 la plage,
• La plage,
• La chaîne de texte après la plage.

Si vous inspectez la grille en utilisant l'inspecteur de grille de Firefox, vous pouvez voir les pistes à cinq lignes qui ont été créées pour les éléments.

Vous pouvez également créer une grille en ligne en utilisant affichage: grille en ligne ; 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 zone de niveau bloc (il s'agit uniquement du type d'affichage externe). C'est pourquoi le conteneur de grille se comporte comme il le fait ci-dessus lorsqu'il se trouve à côté d'autres cases de la page.

Cet exemple suivant a une grille suivie d'une chaîne de texte, car il s'agit d'une grille de niveau en ligne, le texte peut afficher à côté. Les choses au niveau en ligne ne s'étirent pas pour occuper tout l'espace dans la dimension en ligne de la même manière que les choses au niveau bloc.

Remarque : À 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 affichent: grille en ligne pour créer un conteneur de niveau en ligne. Vous pouvez lire cette modification des spécifications d'affichage dans mon article, " Creuser dans la propriété DIsplay: les deux valeurs d'affichage ".

Colonnes et lignes

Pour obtenir quelque chose qui ressemble à un grille, nous devrons ajouter des colonnes et des lignes. Celles-ci sont créées à 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, en tant que 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 voir, il existe de nombreuses façons de créer une liste de pistes! Voyons exactement comment tout cela fonctionne, avec quelques conseils pour savoir pourquoi vous pouvez utiliser chacun d'eux.

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 s'additionne à moins que ce qui est disponible dans le conteneur de grille, alors par défaut, les pistes s'aligneront au début du conteneur et l'espace disponible ira à la fin. En effet, la valeur par défaut de align-content et justification-content est start . Vous pouvez espacer les pistes de la grille ou les déplacer vers la fin du conteneur à l'aide des 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 de 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'encapsule doucement dans la mesure du possible. La piste devient la taille du mot le plus long dans la colonne ou le plus grand élément de taille fixe.

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

Le mot-clé fit-content ne peut être utilisé qu'en passant une valeur. Cette valeur devient le maximum que cette piste atteindra. Par conséquent, la piste se comportera comme max-content avec le contenu déplié et étiré jusqu'à ce qu'il atteigne la valeur que vous avez saisie. À ce stade, il commencera à encapsuler normalement. Votre piste peut donc ê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 disposition dans mon article « Quelle est la taille de cette boîte? Comprendre le dimensionnement dans la disposition CSS ".

Si vous vous retrouvez avec des pistes qui prennent plus d'espace que vous n'en avez dans votre conteneur, elles déborderont. Si vous utilisez des pourcentages, comme pour les dispositions flottantes ou flexibles basées sur un pourcentage, vous devrez vous assurer que le pourcentage total ne dépasse pas 100% si vous souhaitez éviter le débordement.

The fr Unit

Grid Layout comprend une méthode qui peut vous faire économiser le calcul des pourcentages par vous-même – 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 grille.

Cela signifie qu'avec une liste de pistes de 1fr 1fr 1fr ; l'espace disponible est divisé en trois et partagé également entre les pistes. Avec une liste de pistes de 2fr 1fr 1fr l'espace disponible est divisé en quatre et deux parties sont données pour suivre une – une partie chacune pour les pistes deux et trois.

Un élément à surveiller 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 long mot qui ne peut pas être encapsulé, cela sera disposé avant que l'espace ne soit partagé.

Dans l'exemple suivant, j'ai supprimé les espaces entre les mots de ItemThree . Cela a fait une longue chaîne incassable de sorte que la distribution de l'espace se produit après que la disposition de cet élément a été prise en compte.

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 réglée sur fit-content (300px) et l'autre sur 1fr. Cela donne un composant qui peut avoir quelque chose de plus petit que 300px 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 largeur maximale: 100% ), la première piste cessera de croître à 300 pixels et l'unité fr prendra le reste de l'espace. Mélanger l'unité fr avec le contenu fit est un moyen de créer des composants très flexibles pour votre site.

La fonction repeat ()

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

 grille-modèle-colonnes: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grille-modèle-colonnes: répéter (12, 1fr);

Lors de l'utilisation de repeat () la valeur avant la colonne est le nombre de répétitions de 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 fois pour répéter le modèle, vous pouvez également utiliser les mots-clés remplissage automatique ou ajustement automatique . L'utilisation d'un de ces mots clés signifie qu'au lieu d'un nombre fixe de pistes, votre conteneur de grille sera rempli avec autant de pistes qu'il conviendra.

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 libre. Dans l'exemple ci-dessus, mon conteneur mesure 500 pixels de large, donc j'obtiens deux pistes de 200 pixels plus un espace à la fin.

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

J'ai mentionné qu'il y avait deux mots clés possibles: auto- remplissage et ajustement automatique . 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. Cependant, si vous ne le faites pas (par exemple, si nous supprimons tous les éléments sauf un à l'intérieur du conteneur ci-dessus), alors ils se comportent différemment.

L'utilisation de le remplissage automatique conservera le dimensionnement de piste disponible même s'il y a

Si, à la place, vous utilisez ajustement automatique les pistes vides seront réduites:

En utilisant l'inspecteur de grille de Firefox, 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 adapter deux pistes.

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