Grid

Podcast The CSS – 011: Grille

Une mise en page très courante en conception web est une mise en page d'en-tête, de barre latérale, de corps et de pied de page.

Au fil des ans, de nombreuses méthodes ont permis de résoudre cette mise en page. Cependant, avec la grille CSS, non seulement elle est relativement simple, mais vous disposez de nombreuses options. La grille est particulièrement utile pour combiner le contrôle que le dimensionnement externe offre avec la flexibilité du dimensionnement intrinsèque, ce qui la rend idéale pour ce type de mise en page. En effet, la grille est une méthode de mise en page conçue pour le contenu en deux dimensions. c'est-à-dire disposer les éléments en lignes et en colonnes en même temps.

Lors de la création d'une mise en page en grille, vous définissez une grille avec des lignes et des colonnes. Vous placez ensuite les éléments sur cette grille, ou laissez le navigateur les placer automatiquement dans les cellules que vous avez créées. Il y a beaucoup de choses à gérer en grille, mais avec un aperçu de ce qui est disponible, vous créerez des mises en page en grille en un rien de temps.

Présentation

Alors, que pouvez-vous faire avec la grille ? Les mises en page en grille présentent les caractéristiques suivantes. Ce guide vous présente tous ces éléments.

1. Une grille peut être définie avec des lignes et des colonnes. Vous pouvez choisir la taille de ces pistes de ligne et de colonne ou elles peuvent réagir à la taille du contenu.
2. Les enfants directs du conteneur de la grille seront automatiquement placés sur cette grille.
3. Vous pouvez également les placer à l'endroit qui vous convient le mieux.
4. Les lignes et les zones de la grille peuvent être nommées pour faciliter le placement.
5. L'espace libre dans le conteneur de la grille peut être réparti entre les pistes.
6. Les éléments de la grille peuvent être alignés dans leur zone.

Terminologie de la grille

La grille comprend un tas de nouvelles terminologies, car c'est la première fois que CSS dispose d'un véritable système de mise en page.

Quadrillage

Une grille est composée de lignes qui s'étendent horizontalement et verticalement. Si votre grille a quatre colonnes, elle comportera cinq lignes de colonnes, dont celle qui suit la dernière colonne.

Les lignes sont numérotées à partir de 1. La numérotation suit le mode d'écriture et l'orientation du script du composant. Cela signifie que la ligne de colonne 1 s'affichera à gauche dans une langue qui se lit de gauche à droite (telle que l'anglais) et à droite dans une langue (comme l'arabe) qui se lit de droite à gauche.

Pistes de grille

Une piste est l'espace entre deux lignes de la grille. Une piste de ligne est entre deux lignes de ligne et une piste de colonne entre deux lignes de colonne. Lorsque nous créons notre grille, nous créons ces pistes en leur attribuant une taille.

Cellule de grille

Une cellule de grille est le plus petit espace d'une grille défini par l'intersection des pistes de lignes et de colonnes. C’est comme une cellule de tableau ou une cellule d’une feuille de calcul. Si vous définissez une grille et ne placez aucun des éléments, ils seront automatiquement disposés en un élément dans chaque cellule de grille définie.

Zone de la grille

Plusieurs cellules de la grille. Les zones de grille sont créées en faisant en sorte qu'un élément s'étend sur plusieurs pistes.

Écarts

Un gouttière ou une allée entre les voies À des fins de dimensionnement, ils agissent comme une piste standard. Vous ne pouvez pas placer du contenu dans un espace blanc, mais vous pouvez couvrir des éléments de la grille.

Conteneur de la grille

Élément HTML auquel display: grid est appliqué et crée donc un contexte de mise en forme de grille pour les enfants directs.

.container {
  display: grid;
}

Élément de grille

Un élément de grille est un élément enfant direct du conteneur de la grille.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Lignes et colonnes

Pour créer une grille de base, vous pouvez définir une grille avec trois pistes à colonnes, deux pistes de lignes et un espace de 10 pixels entre les pistes, comme suit.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

Cette grille illustre bon nombre des éléments décrits dans la section Terminologie. Il a trois pistes à colonnes. Chaque piste utilise une unité de longueur différente. Elle comporte deux pistes de ligne, l'une utilisant une unité de longueur et l'autre en auto. Lorsqu'elle est utilisée comme un dimensionnement de piste automatique, on peut considérer qu'elle est aussi grande que le contenu. Par défaut, les pistes sont redimensionnées automatiquement.

Si l'élément avec une classe .container comporte des éléments enfants, ceux-ci s'affichent immédiatement sur cette grille. Vous pouvez voir un exemple concret dans la démo ci-dessous.

La superposition de la grille dans les outils pour les développeurs Chrome peut vous aider à comprendre les différentes parties de la grille.

Ouvrez la démonstration dans Chrome. Inspectez l'élément sur fond gris, avec l'ID container. Mettez la grille en surbrillance en sélectionnant le badge correspondant dans le DOM, à côté de l'élément .container. Dans l'onglet "Mise en page", sélectionnez Afficher les numéros des lignes dans le menu déroulant pour afficher les numéros de ligne sur votre grille.

Mots clés associés à la taille intrinsèque

Outre les dimensions de longueur et de pourcentage décrites dans la section sur les unités de dimensionnement, les pistes de grille peuvent utiliser des mots clés de dimensionnement intrinsèque. Ces mots clés sont définis dans la spécification "Box Sizing" et ajoutent d'autres méthodes de dimensionnement en CSS, et pas seulement les pistes de la grille.

• min-content
• max-content
• fit-content()

Le mot clé min-content permet de réduire au maximum la taille d'une piste afin que son contenu ne dépasse pas. Si vous modifiez l'exemple de mise en page de la grille pour qu'elle comporte trois pistes à trois colonnes toutes à la taille de min-content, elles deviendront aussi étroites que le mot le plus long de la piste.

Le mot clé max-content a l'effet inverse. La piste devient suffisamment large pour que tout le contenu puisse s'afficher en une seule longue chaîne ininterrompue. Cela peut entraîner des dépassements, car la chaîne ne sera pas encapsulée.

La fonction fit-content() agit au début comme max-content. Toutefois, une fois que la piste atteint la taille que vous transmettez à la fonction, le contenu commence à être encapsulé. Ainsi, fit-content(10em) crée une piste inférieure à 10 em si la taille du max-content est inférieure à 10 em, mais jamais supérieure à 10 em.

Dans la démonstration suivante, testez les différents mots clés de dimensionnement intrinsèque en modifiant le dimensionnement des pistes de la grille.

Unité fr

Nous utilisons les variables de longueur, les pourcentages, ainsi que ces nouveaux mots clés. Il existe également une méthode de dimensionnement spéciale qui ne fonctionne qu'avec une mise en page en grille. Il s'agit de l'unité fr, une longueur flexible décrivant une partie de l'espace disponible dans le conteneur de la grille.

L'unité fr fonctionne de la même manière que l'unité flex: auto dans Flexbox. Elle répartit de l'espace après la disposition des éléments. Par conséquent, nous avons trois colonnes qui reçoivent toutes la même part d'espace disponible:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Comme l'unité fr partage l'espace disponible, elle peut être combinée à un écart de taille fixe ou à des pistes de taille fixe. Pour avoir un composant avec un élément de taille fixe et que la deuxième piste occupe l'espace restant, vous pouvez l'utiliser comme liste de suivi de grid-template-columns: 200px 1fr.

Utiliser différentes valeurs pour l'unité fr partagera l'espace en proportion. Des valeurs plus élevées obtiennent plus d'espace libre. Dans la démo ci-dessous, modifiez la valeur de la troisième piste.

La fonction minmax()

Cette fonction vous permet de définir des tailles minimale et maximale pour les titres. Cela peut être très utile. Si nous prenons l'exemple de l'unité fr ci-dessus qui répartit l'espace restant, il pourrait être écrit en utilisant minmax() sous la forme minmax(auto, 1fr). La grille examine la taille intrinsèque du contenu, puis distribue l'espace disponible après avoir laissé suffisamment d'espace au contenu. Cela signifie que vous n'obtiendrez peut-être pas de pistes qui ont chacune une part égale de l'espace disponible dans le conteneur de la grille.

Pour forcer une piste à occuper une part égale de l'espace dans le conteneur de la grille moins les espaces, utilisez minmax. Remplacez 1fr comme taille de piste par minmax(0, 1fr). La taille minimale de la piste est alors définie sur 0, et non la taille minimale du contenu. La grille prend ensuite toute la taille disponible dans le conteneur, déduit la taille nécessaire pour les écarts et partage le reste en fonction de vos unités fr.

Notation repeat()

Si vous souhaitez créer une grille de suivi de 12 colonnes avec des colonnes égales, vous pouvez utiliser le CSS suivant :

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

Vous pouvez également l'écrire à l'aide de repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

Vous pouvez utiliser la fonction repeat() pour répéter n'importe quelle section de la liste des pistes. Vous pouvez, par exemple, répéter un certain nombre de pistes. Vous pouvez également avoir des pistes normales et une section qui se répète.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill et auto-fit

Vous pouvez combiner tout ce que vous avez appris sur le dimensionnement des pistes, minmax() et les répétitions pour créer un modèle utile avec une mise en page en grille. Peut-être ne souhaitez-vous pas spécifier le nombre de pistes de colonnes, mais plutôt en créer autant que possible pour votre conteneur.

Pour ce faire, utilisez repeat() et les mots clés auto-fill ou auto-fit. La grille de démonstration ci-dessous permet de créer autant de pistes de 200 pixels que possible dans le conteneur. Ouvrez la démo dans une nouvelle fenêtre et observez l'évolution de la grille à mesure que vous modifiez la taille de la fenêtre d'affichage.

La démo inclut autant de pistes que nécessaire. Toutefois, les canaux ne sont pas flexibles. Vous obtiendrez un blanc à la fin jusqu'à ce que vous ayez assez d'espace pour une autre piste de 200 pixels. Si vous ajoutez la fonction minmax(), vous pouvez demander autant de pistes que possible, avec une taille minimale de 200 pixels et une taille maximale de 1fr. La grille présente ensuite les pistes de 200 pixels et l'espace restant leur est réparti de manière égale.

Vous obtenez ainsi un format responsif en deux dimensions sans avoir à effectuer de requêtes média.

Il existe une légère différence entre auto-fill et auto-fit. Dans la démonstration suivante, vous allez utiliser une mise en page en grille en utilisant la syntaxe expliquée ci-dessus, mais avec seulement deux éléments de grille dans le conteneur de la grille. À l'aide du mot clé auto-fill, vous pouvez constater que des canaux vides ont été créés. Remplacez le mot clé par auto-fit pour que la taille des canaux soit réduite à 0. Cela signifie que les canaux flexibles s'agrandissent pour occuper plus d'espace.

Sinon, les mots clés auto-fill et auto-fit se comportent exactement de la même manière. Il n'y a aucune différence entre les deux une fois que la première piste est remplie.

Emplacement automatique

Jusqu'à présent, vous avez vu le placement automatique sur la grille à l'œuvre dans les démonstrations. Les éléments sont placés sur la grille un par cellule, dans l'ordre dans lequel ils apparaissent dans la source. C'est tout ce dont vous avez besoin pour de nombreuses mises en page. Si vous avez besoin de plus de contrôle, plusieurs options s'offrent à vous. La première consiste à ajuster la mise en page de l'emplacement automatique.

Placer des éléments dans des colonnes

Le comportement par défaut de la mise en page en grille consiste à placer les éléments le long des lignes. Vous pouvez placer les éléments dans des colonnes à l'aide de grid-auto-flow: column. Vous devez définir des pistes de ligne, sinon les éléments créeront des pistes de colonnes intrinsèques et les disposeront sur une longue ligne.

Ces valeurs se rapportent au mode d'écriture du document. Une ligne s'exécute toujours dans la direction d'exécution d'une phrase en mode d'écriture du document ou du composant. Dans la démonstration suivante, vous pouvez modifier le mode de la valeur de grid-auto-flow et de la propriété writing-mode.

Pistes panoramiques

Vous pouvez faire en sorte que tout ou partie des éléments d'une mise en page placée automatiquement s'étendent sur plusieurs pistes. Pour grid-column-end ou grid-row-end, utilisez le mot clé span et le nombre de lignes à s'étendre.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

Comme vous n'avez pas spécifié de grid-column-start, cette propriété utilise la valeur initiale de auto et est placée selon les règles de placement automatique. Vous pouvez également spécifier la même chose à l'aide du raccourci grid-column:

.item {
    grid-column: auto / span 2;
}

Combler les lacunes

Une mise en page placée automatiquement avec certains éléments couvrant plusieurs pistes peut entraîner l'apparition d'une grille avec quelques cellules non remplies. Le comportement par défaut de la mise en page sous forme de grille avec une mise en page entièrement placée automatiquement consiste à toujours progresser vers l'avant. Les éléments seront placés dans l'ordre dans lequel ils se trouvent dans la source ou en fonction de toute modification effectuée avec la propriété order. S'il n'y a pas assez d'espace pour accueillir un élément, la grille laisse un espace vide et passe à la piste suivante.

La démonstration suivante illustre ce comportement. La case à cocher applique le mode de packaging dense. Pour ce faire, attribuez la valeur dense à grid-auto-flow. Une fois cette valeur en place, la grille récupère les éléments plus tard dans la mise en page et les utilise pour combler les espaces vides. Cela peut signifier que l'affichage se déconnecte de l'ordre logique.

Placer des éléments

Vous disposez déjà de nombreuses fonctionnalités de la grille CSS. Voyons maintenant comment positionner les éléments sur la grille que nous avons créée.

La mise en page sous forme de grille CSS est basée sur une grille de lignes numérotées. Le moyen le plus simple de placer des éléments sur la grille consiste à les placer d'une ligne à une autre. Dans ce guide, vous découvrirez d'autres façons de placer des éléments, mais vous aurez toujours accès à ces lignes numérotées.

Les propriétés que vous pouvez utiliser pour placer les articles par numéro de ligne sont les suivantes:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Ils comportent des raccourcis qui vous permettent de définir simultanément les lignes de début et de fin:

• grid-column
• grid-row

Pour placer votre élément, définissez les lignes de début et de fin de la zone de la grille dans laquelle il doit être placé.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Les outils pour les développeurs Chrome fournissent un guide visuel des lignes vous permettant de vérifier où se trouve votre élément.

La numérotation des lignes suit le mode et la direction d'écriture du composant. Dans la démonstration suivante, modifiez le mode ou la direction d'écriture pour voir comment le placement des éléments reste cohérent par rapport au flux de texte.

Empiler des éléments

Le positionnement basé sur la ligne vous permet de placer des éléments dans la même cellule de la grille. Cela signifie que vous pouvez empiler des éléments ou faire en sorte qu'un élément en chevauche partiellement un autre. Les éléments venant plus tard dans la source s'affichent au-dessus des éléments placés plus tard dans la source. Vous pouvez modifier cet ordre d'empilement en utilisant z-index, comme pour les éléments positionnés.

Numéros de ligne négatifs

Lorsque vous créez une grille à l'aide de grid-template-rows et grid-template-columns, vous créez ce qu'on appelle la grille explicite. Il s'agit d'une grille que vous avez définie et que vous avez donnée aux pistes.

Parfois, vous aurez des éléments qui s'affichent en dehors de cette grille explicite. Par exemple, vous pouvez définir des pistes de colonnes, puis ajouter plusieurs lignes d'éléments de grille sans jamais définir de pistes de lignes. Par défaut, les pistes sont redimensionnées automatiquement. Vous pouvez également placer un élément à l'aide de grid-column-end qui se trouve en dehors de la grille explicite définie. Dans les deux cas, la grille crée des pistes pour que la mise en page fonctionne. Ces pistes sont appelées grille implicite.

La plupart du temps, cela ne fera aucune différence si vous travaillez avec une grille implicite ou explicite. Toutefois, les emplacements basés sur les lignes peuvent faire la principale différence entre les deux.

En utilisant des numéros de ligne négatifs, vous pouvez placer des éléments à partir de la ligne de fin de la grille explicite. Cela peut être utile si vous souhaitez qu'un élément s'étend de la première à la dernière ligne de colonne. Dans ce cas, vous pouvez utiliser grid-column: 1 / -1. L'élément s'étire directement sur la grille explicite.

Toutefois, cela ne fonctionne que pour la grille explicite. Utilisez une mise en page de trois lignes d'éléments placés automatiquement, où vous souhaitez que le tout premier élément s'étend jusqu'à la ligne de fin de la grille.

Vous pensez peut-être pouvoir donner à cet élément grid-row: 1 / -1. La démonstration ci-dessous vous montre que cela ne fonctionne pas. Les pistes sont créées dans la grille implicite. Il n'y a aucun moyen d'atteindre la fin de la grille avec -1.

Dimensionnement des pistes implicites

Les pistes créées dans la grille implicite sont redimensionnées automatiquement par défaut. Toutefois, si vous souhaitez contrôler le dimensionnement des lignes, utilisez la propriété grid-auto-rows et, pour les colonnes, grid-auto-columns.

Pour créer toutes les lignes implicites avec une taille minimale de 10em et une taille maximale de auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

Pour créer des colonnes implicites avec un format de pistes de 100 et 200 pixels. Dans ce cas, la première colonne implicite sera de 100 pixels, la deuxième de 200 pixels, la troisième colonne de 100 pixels, etc.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Lignes de la grille nommées

Il peut être plus facile de placer des éléments dans une mise en page si les lignes ont un nom plutôt qu'un nombre. Vous pouvez nommer n'importe quelle ligne de votre grille en ajoutant le nom de votre choix entre crochets. Plusieurs noms peuvent être ajoutés, séparés par un espace entre les mêmes crochets. Une fois que vous avez nommé des lignes, vous pouvez les utiliser à la place des nombres.

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

Zones du modèle de grille

Vous pouvez également nommer des zones de la grille et placer des éléments sur ces zones nommées. Cette technique est très pratique, car elle vous permet de voir à quoi ressemble votre composant directement dans le code CSS.

Pour commencer, attribuez un nom aux enfants directs de votre conteneur de grille à l'aide de la propriété grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Le nom peut être autre que les mots clés auto et span. Une fois tous vos éléments nommés, utilisez la propriété grid-template-areas pour définir les cellules de grille que chaque élément couvrira. Chaque ligne est définie entre guillemets.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Voici quelques règles lorsque vous utilisez grid-template-areas.

• La valeur doit correspondre à une grille complète sans cellules vides.
• Pour s'étendre sur plusieurs pistes, répétez le nom.
• Les zones créées en répétant le nom doivent être rectangulaires et ne peuvent pas être déconnectées.

Si vous enfreignez l'une des règles ci-dessus, la valeur est considérée comme non valide et supprimée.

Pour laisser des espaces blancs sur la grille, utilisez un ou plusieurs . sans espace blanc entre eux. Par exemple, pour laisser la toute première cellule de la grille vide, je pourrais ajouter une série de . caractères:

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Comme l'intégralité de votre mise en page est définie à un seul endroit, vous pouvez la redéfinir facilement à l'aide de requêtes média. Dans l'exemple suivant, j'ai créé une mise en page à deux colonnes qui passe à trois colonnes en redéfinissant la valeur de grid-template-columns et grid-template-areas. Ouvrez l'exemple dans une nouvelle fenêtre pour tester la taille de la fenêtre d'affichage et voir le changement de mise en page.

Vous pouvez également voir la relation entre la propriété grid-template-areas et writing-mode et la direction, comme avec d'autres méthodes de grille.

Propriétés abrégées

Deux propriétés abrégées vous permettent de définir de nombreuses propriétés de grille en une seule fois. Elles peuvent sembler un peu déroutantes jusqu'à ce que vous décomposiez exactement comment elles vont ensemble. À vous de choisir si vous souhaitez les utiliser ou si vous préférez utiliser des articles à long terme.

grid-template

La propriété grid-template est un raccourci pour grid-template-rows, grid-template-columns et grid-template-areas. Les lignes sont définies en premier, avec la valeur de grid-template-areas. Le dimensionnement des colonnes est ajouté après /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid établissement

Le raccourci grid peut être utilisé exactement de la même manière que le raccourci grid-template. Lorsqu'elle est utilisée de cette manière, elle rétablit les valeurs initiales des autres propriétés de grille acceptées. L'ensemble complet étant:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Vous pouvez également utiliser ce raccourci pour définir le comportement de la grille implicite, par exemple:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Alignement

La mise en page sous forme de grille utilise les mêmes propriétés d'alignement que celles que vous avez apprises dans le guide de flexbox. Dans la grille, les propriétés qui commencent par justify- sont toujours utilisées sur l'axe intégré, c'est-à-dire la direction dans laquelle les phrases s'exécutent dans votre mode d'écriture.

Les propriétés commençant par align- sont utilisées sur l'axe de bloc, c'est-à-dire la direction dans laquelle les blocs sont disposés en mode d'écriture.

• justify-content et align-content : distribuent de l'espace supplémentaire dans le conteneur de la grille autour ou entre les pistes.
• justify-self et align-self : sont appliqués à un élément de grille pour le déplacer à l'intérieur de la zone de grille dans laquelle il est placé.
• justify-items et align-items : sont appliqués au conteneur de la grille pour définir toutes les propriétés justify-self des éléments.

Distribuer de l'espace supplémentaire

Dans cette démonstration, la grille est plus grande que l'espace nécessaire pour disposer les pistes à largeur fixe. Cela signifie que nous disposons d'un espace à la fois pour les dimensions inline et les dimensions de bloc de la grille. Essayez différentes valeurs pour align-content et justify-content pour observer le comportement des titres.

Notez que les écarts deviennent plus importants lorsque vous utilisez des valeurs telles que space-between, et que tout élément de grille couvrant deux pistes s'agrandit également pour absorber l'espace supplémentaire ajouté à l'écart.

Déplacer du contenu

Les éléments avec une couleur d'arrière-plan semblent remplir entièrement la zone de la grille dans laquelle ils sont placés, car la valeur initiale de justify-self et align-self est stretch.

Dans la démonstration, modifiez les valeurs de justify-items et align-items pour voir comment cela modifie la mise en page. La taille de la zone de la grille ne change pas, mais les éléments sont déplacés dans la zone définie.

Testez vos connaissances

Tester vos connaissances en grille

main {
  display: grid;
}

Ressources

Ce guide vous a donné un aperçu des différentes parties des spécifications de mise en page sous forme de grille. Pour en savoir plus, consultez les ressources suivantes.

• Mise en page sous forme de grille CSS MDN
• Un guide complet de la grille
• Créer un conteneur de type grille
• Inspecter la grille CSS dans les outils pour les développeurs Chrome
• Une collection complète de supports d'apprentissage par grille