A propos de l'auteur

Rachel Andrew est non seulement rédactrice en chef du magazine Smashing, mais également développeur Web, écrivaine et conférencière. Elle est l'auteur de plusieurs livres, dont…
Plus à propos
Rachel
Andrew

Dans une nouvelle série, Rachel Andrew décompose la spécification CSS Grid Layout. Cette fois, nous examinons en détail ce qui se passe lorsque vous créez un conteneur de grille et les différentes propriétés qui peuvent être appliquées au conteneur pour façonner votre grille.

C'est le début d'une nouvelle série ici au se concentrant sur la 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 en cours de route.

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

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

Débordement et perte de données en CSS

CSS est conçu pour garder votre contenu lisible. Explorons les situations dans lesquelles vous pourriez rencontrer un débordement dans vos conceptions Web et comment CSS a évolué pour créer de meilleures façons de gérer et de concevoir autour de quantités inconnues de contenu. Lire l'article →

Création d'un conteneur de grille

La grille, comme Flexbox, est une valeur du CSS afficher propriété. Par conséquent, pour indiquer au navigateur que vous souhaitez utiliser la disposition de grille que vous utilisez affichage: grille. Cela fait, le navigateur vous donnera une boîte de niveau bloc sur l'élément avec affichage: grille et tous les enfants directs commenceront à participer à un contexte de formatage de la 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 pouvez pas voir 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 deviendra un élément de 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 comporte deux éléments au niveau du bloc, plus une chaîne de texte avec une étendue au milieu de la chaîne. Nous nous retrouvons avec cinq éléments de la grille:

  • Les deux div éléments,
  • La chaîne de texte avant la durée,
  • La durée,
  • La chaîne de texte après la plage.

Voir le Pen Grid Container: les enfants directs et les chaînes de texte deviennent des éléments de grille par Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: les enfants directs et les chaînes de texte deviennent des éléments de grille par Rachel Andrew (@rachelandrew) sur CodePen.

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

Une grille à une seule colonne avec cinq lignes
L'inspecteur de grille est utile pour vous aider à voir combien de lignes ont été créées

Vous pouvez également créer une grille en ligne à l'aide de 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 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 s'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 du bloc.

Voir le Pen Grid Container: inline-grid de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: inline-grid de Rachel Andrew (@rachelandrew) sur CodePen.

Remarque: À l'avenir, nous serons en mesure de mieux décrire notre mise en page en utilisant affichage: grille de blocs afin de créer notre conteneur de niveau bloc, et affichage: grille en ligne pour créer un conteneur de niveau en ligne. Vous pouvez en savoir plus sur cette modification des spécifications 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 du grille-modèle-colonnes et grille-modèle-lignes Propriétés. 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:

grille-modèle-colonnes: 100px 100px 200px;Crée une grille à trois colonnes: la première colonne est 100 px, la seconde 100 px, la troisième 200 px.
grille-modèle-colonnes: contenu minimal contenu maximal contenu ajusté (10em)Crée une grille à trois colonnes: la première colonne est le contenu min taille pour cette piste, la seconde contenu max Taille. Le troisième est soit contenu max sauf si le contenu est supérieur à 10em, auquel cas il est fixé à 10em.
grille-modèle-colonnes: 1fr 1fr 1fr;Crée une grille à trois colonnes à l'aide de la fr unité. L'espace disponible dans le conteneur de grille est divisé en trois et partagé entre les trois colonnes.
grille-modèle-colonnes: répéter (2, 10em 1fr);Crée une grille à quatre colonnes avec un motif répétitif de 10em 1fr 10em 1fr car la liste des pistes dans l'instruction repeat est répétée deux fois.
grille-modèle-colonnes: répéter (remplissage automatique, 200 px);Remplit le conteneur avec autant de colonnes de 200 pixels qu'il y en aura en laissant un espace à la fin s'il y a de l'espace disponible.
grille-modèle-colonnes: répéter (remplissage automatique, minmax (200px, 1fr));Remplit le conteneur avec autant de colonnes 200px qu'il en convient, puis répartit l'espace restant également entre les colonnes créées.
grille-modèle-colonnes: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end];Crée une grille à trois colonnes: les première et troisième colonnes ont 1 partie chacune de l'espace disponible tandis que la colonne du milieu a 3 parties. Les lignes sont nommées en mettant les noms de ligne entre crochets.

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 justifier-contenu est début. Vous pouvez espacer les pistes de la grille ou les déplacer à 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».

Voir le Pen Grid Container: length units par Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: length units par Rachel Andrew (@rachelandrew) sur CodePen.

Vous pouvez également utiliser les mots clés contenu min, contenu max et fit-content (). En utilisant contenu min 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 de la colonne ou le plus grand élément de taille fixe.

En utilisant contenu max fera en sorte que le contenu ne fasse aucun emballage souple. Dans une colonne, n'importe quelle chaîne de texte sera dépliée, ce qui peut provoquer un débordement.

le fit-content Le mot-clé ne peut être utilisé qu'en transmettant une valeur. Cette valeur devient le maximum que cette piste atteindra. Par conséquent, la piste agira comme contenu max avec le contenu déplié et étiré jusqu'à ce qu'il atteigne la valeur que vous avez saisie. À ce stade, il commencera à envelopper normalement. Votre piste peut donc être plus petite que la valeur que vous transmettez, mais jamais plus grande.

Voir le Pen Grid Container: min-content, max-content, fit-content () de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: min-content, max-content, fit-content () de Rachel Andrew (@rachelandrew) sur CodePen.

Vous pouvez en savoir plus sur le dimensionnement dans la grille et d'autres méthodes de mise en page 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 veiller à ce que le pourcentage total ne dépasse pas 100% si vous souhaitez éviter le débordement.

le fr Unité

La disposition de la grille comprend une méthode qui vous permet d'économiser vous-même le calcul des pourcentages – suivez le dimensionnement avec le fr unité. Cette unité n'est pas une longueur et ne peut donc pas être combinée avec calc (); il s'agit d'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 track-list 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.

Voir le Pen Grid Container: fr de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: fr de Rachel Andrew (@rachelandrew) sur CodePen.

Quelque chose à surveiller est que ce qui est partagé par défaut est 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 disposé avant que l'espace ne soit partagé.

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

Voir le Pen Grid Container: fr avec un plus grand contenu par Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: fr avec un plus grand contenu par Rachel Andrew (@rachelandrew) sur CodePen.

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

Voir le Pen Grid Container: mixage d'unités fr et de pistes de taille fixe par Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: mixage d'unités fr et de pistes de taille fixe par Rachel Andrew (@rachelandrew) sur CodePen.

Vous pouvez avoir un composant avec une piste réglée sur fit-content (300px) et l'autre à 1fr. Cela fait 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 le fr l'unité s'agrandit pour occuper le reste de l'espace.

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

Voir le Pen Grid Container: mélange de fr et fit-content () par Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: mélange de fr et fit-content () par Rachel Andrew (@rachelandrew) sur CodePen.

La fonction repeat ()

En utilisant répéter() dans votre liste de pistes peut sauver la saisie de 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;
grille-modèle-colonnes: répéter (12, 1fr);

Lors de l'utilisation répéter() la valeur avant la colonne est le nombre de répétitions de la track-list 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 le répéter() fonction pour une partie d'une liste de pistes. Par exemple, la ligne suivante vous donnera une piste 1fr, 3 pistes 200px et une piste 1fr finale.

grille-modèle-colonnes: répétition 1fr (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 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 qu'il conviendra.

Voir le Pen Grid Container: auto-fill de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: auto-fill de Rachel Andrew (@rachelandrew) sur CodePen.

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 a une largeur de 500 pixels, 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, tout espace disponible étant réparti sur toutes les pistes. le min max() La fonction prend une taille minimale et maximale. Avec un minimum de 200px et un maximum de 1fr, nous obtenons autant de pistes 200px que possible et parce que le maximum est de 1fr, que nous savons déjà partager l'espace de manière égale, le supplément est réparti sur les pistes.

Voir le Pen Grid Container: auto-fill et minmax () de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: auto-fill et minmax () de Rachel Andrew (@rachelandrew) sur CodePen.

J'ai mentionné qu'il y avait deux mots clés possibles: remplissage automatique 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. Si, cependant, 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.

En utilisant remplissage automatique conservera le dimensionnement de piste disponible même s'il n'y a pas de contenu pour y entrer.

Voir le Pen Grid Container: remplissage automatique et minmax () avec un élément de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: remplissage automatique et minmax () avec un élément de Rachel Andrew (@rachelandrew) sur CodePen.

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

Voir le Pen Grid Container: ajustement automatique et minmax () avec un élément de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: ajustement automatique et minmax () avec un élément de Rachel Andrew (@rachelandrew) sur CodePen.

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 fond de notre grille est toujours la ligne 3 car nous pouvons adapter deux pistes.

Un seul élément de grille remplit le conteneur, l'inspecteur de grille met en évidence les lignes de colonne
La piste est toujours là mais s'est effondrée

Lignes nommées

Mon dernier exemple ci-dessus a utilisé l'approche des lignes nommées. Lorsque vous utilisez Grid. vous avez toujours des numéros de ligne, mais 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 de pistes suivante, toutes mes lignes ont deux noms.

grille-modèle-colonnes: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

Vous pouvez nommer vos lignes comme bon vous semble, sauf le mot envergure 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 façon dont les lignes nommées sont utilisées. En attendant, lisez mon article sur «Nommer les choses dans la disposition de la grille CSS» pour vous aider à en savoir plus sur le sujet.

La grille explicite vs la grille implicite

Lors de la création d'une grille à l'aide grille-modèle-colonnes et grille-modèle-lignes avec une track-list, vous créez ce que l'on appelle le grille explicite. Il s'agit de la grille que vous avez définie qui a le dimensionnement que vous avez choisi pour chaque piste.

Si vous avez plus d'éléments que vous n'en avez, ou placez un élément de sorte qu'il tombe en dehors des limites de la grille que vous avez créée, la grille créera des pistes dans le 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é affichage: grille sur l'élément parent et les lignes créées par la grille, 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 colonnes implicites en utilisant le grille-lignes-automatiques ou grille-colonnes-automatiques Propriétés. Ces propriétés prennent un track-list, donc si vous voulez que toutes les colonnes implicites aient au moins 200 pixels de hauteur mais grandissent s'il y a plus de contenu, vous pouvez utiliser ce qui suit:

grille-auto-lignes: minmax (200px, auto)

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

grille-auto-lignes: auto 100 px

Voir le Pen Grid Container: grid-auto-row de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Grid Container: grid-auto-row de Rachel Andrew (@rachelandrew) sur CodePen.

Utilisation d'une grille avec placement automatique

La création d'une grille (et le fait de 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 réaliser. Nous n'avons pas encore envisagé de placer des éléments sur la grille, mais de nombreuses dispositions qui utilisent la grille ne font aucun placement. Ils s'appuient simplement sur le placement des éléments dans l'ordre source – un dans chaque cellule de la grille.

Si vous êtes nouveau dans 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.

Smashing Editorial
(il)