Grid

Podcast CSS – 011: Grille

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

Au fil des années, il existe de nombreuses méthodes pour résoudre cette mise en page, mais avec la grille CSS, non seulement il est relativement simple, mais vous avez beaucoup d'options. La grille est incroyablement utile pour combiner les commandes que le dimensionnement extrinsique offre 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 les contenus en deux dimensions. Autrement dit, disposer les éléments en lignes et en colonnes en même temps.

Lorsque vous créez une mise en page en grille, vous définissez une grille avec des lignes et des colonnes. Ensuite, vous placez des éléments sur cette grille, ou autoriser le navigateur à les placer automatiquement dans les cellules que vous avez créées. Il y a beaucoup de choses à griller, mais avec un aperçu de ce qui est disponible vous ferez des mises en page en grille en un rien de temps.

Présentation

Que pouvez-vous faire avec une grille ? Les mises en page en grille offrent les fonctionnalités suivantes. Ce guide aborde chacune de ces méthodes.

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

Terminologie liée aux grilles

La grille comporte de nombreuses 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'exécutent horizontalement et verticalement. Si votre grille a quatre colonnes, il comportera cinq lignes de colonne, dont celle située après la dernière colonne.

Les lignes sont numérotées à partir de 1, avec la numérotation suivant le mode d'écriture et l'orientation du script du composant. Cela signifie que la ligne de colonne 1 sera à gauche dans une langue qui s'écrit de gauche à droite, comme l'anglais, et, à droite, dans une langue qui s'écrit de droite à gauche, comme l'arabe.

Pistes en quadrillage

Une piste correspond à l'espace entre deux lignes de la grille. Une piste de ligne se trouve entre deux lignes de lignes et une piste de colonnes entre deux lignes de colonnes. 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 dans une grille, défini par l'intersection de pistes de ligne et de colonne. C'est comme les cellules d'un tableau ou d'une feuille de calcul. Si vous définissez une grille et que vous ne placez aucun des éléments ils seront automatiquement disposés un élément dans chaque cellule de grille définie.

Zone de la grille

Plusieurs cellules de grille ensemble. Les zones de grille sont créées en plaçant un élément sur plusieurs pistes.

Lacunes

Une gouttière ou une allée entre des rails. Pour des raisons de taille, ils fonctionnent comme une piste classique. Vous ne pouvez pas placer du contenu dans un espace, mais vous pouvez s'étendre sur des éléments de la grille.

Conteneur de la grille

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

.container {
  display: grid;
}

Élément de grille

Un élément de grille est un élément qui est un 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 de colonnes, deux lignes de piste 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 de nombreux éléments décrits dans la section Terminologie. Il comporte trois pistes de colonnes. Chaque piste utilise une unité de durée différente. Il a deux lignes de piste, l'un utilisant une unité de longueur et l'autre, automatique. Lorsqu'elle sert d'outil de dimensionnement de piste, elle peut être considérée comme aussi grande que le contenu. La taille des pistes est définie automatiquement par défaut.

Si l'élément avec une classe de .container comporte des éléments enfants, elles se disposeront immédiatement sur cette grille. La démo ci-dessous illustre cette fonctionnalité.

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 avec l'arrière-plan gris, dont l'ID est container. Pour mettre la grille en surbrillance, sélectionnez 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 de lignes dans le menu déroulant pour voir les numéros de ligne de la grille.

</ph> <ph type="x-smartling-placeholder">

Mots clés associés au dimensionnement des fonctionnalités intrinsèques

Outre les dimensions de longueur et de pourcentage décrites dans la section sur unités de taille, les pistes 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 ajouter des méthodes supplémentaires de dimensionnement des cadres dans CSS, pas seulement des pistes de grille.

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

min-content permet de réduire au maximum la taille d'une piste sans que le contenu de la piste ne déborde. Modifier l'exemple de mise en page sous forme de grille pour avoir trois pistes de colonnes, toutes de taille min-content qu'ils deviennent aussi étroits que le mot le plus long de la piste.

max-content a l'effet inverse. La piste devient suffisamment large pour que tout le contenu s'affiche dans une seule et même longue chaîne ininterrompue. Cela peut entraîner des dépassements, car la chaîne n'est pas encapsulée.

fit-content() agit comme max-content dans un premier temps. Cependant, une fois que la piste atteint la taille que vous transmettez à la fonction, le contenu commence à s'encapsuler. fit-content(10em) crée donc une piste de moins de 10 millièmes, si la taille de max-content est inférieure à 10 em, mais jamais plus de 10 millièmes.

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

L'unité fr

Nous avons les dimensions de longueur existantes, 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 sous forme de grille. Il s'agit de l'unité fr, une longueur flexible qui décrit une part de l'espace disponible dans le conteneur de la grille.

L'unité fr fonctionne de la même manière que flex: auto dans Flexbox. Elle répartit l'espace une fois les éléments disposés. Par conséquent, il convient d'avoir trois colonnes qui reçoivent toutes la même part d'espace disponible:

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

Étant donné que l'unité fr partage l'espace disponible, il peut être associé à un écart de taille fixe ou à des pistes de taille fixe. Pour avoir un composant avec un élément de taille fixe et une deuxième piste occupant tout l'espace restant, que vous pouvez utiliser comme liste de suivi de grid-template-columns: 200px 1fr.

Si vous utilisez des valeurs différentes pour l'unité fr, l'espace sera partagé en proportion. Les valeurs plus grandes obtiennent plus d'espace libre. Dans la démonstration ci-dessous, modifiez la valeur de la troisième piste.

Fonction minmax()

Cette fonction vous permet de définir une taille minimale et une taille maximale pour un titre. Cela peut être très utile. Si nous prenons l'exemple de l'unité fr ci-dessus, qui distribue l'espace restant, il peut être écrit en utilisant minmax() en tant que minmax(auto, 1fr). La grille examine la taille intrinsèque du contenu, puis répartit l'espace disponible après avoir laissé assez d'espace au contenu. Il est donc possible que certains titres ne soient pas tous associés à une part égale. de tout l'espace disponible dans le conteneur de la grille.

Pour forcer une piste à prendre une part égale de l'espace dans le conteneur de la grille, moins les intervalles, utilisez la valeur minmax. Remplacez 1fr comme taille de piste par minmax(0, 1fr). La taille minimale de la piste est donc égale à 0, et non la taille minimale du contenu. La grille prend ensuite toute la taille disponible dans le conteneur, déduisons la taille nécessaire pour les écarts, et partagez le reste selon 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);
}

Ou vous pouvez l’écrire en utilisant 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 votre liste de titres. Par exemple, vous pouvez répéter une série de pistes. Vous pouvez également avoir des titres standards et une section récurrente.

.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 répétez l'opération : pour créer un modèle utile avec une mise en page en grille. Vous ne voulez peut-être pas spécifier le nombre de pistes de colonne, mais souhaitez en créer autant que possible dans votre conteneur.

Pour ce faire, utilisez repeat() et les mots clés auto-fill ou auto-fit. Dans la démonstration ci-dessous, la grille va 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.

Dans la démonstration, nous obtenons autant de pistes que possible. Les canaux ne sont cependant pas flexibles. Vous obtiendrez un écart à la fin jusqu'à ce qu'il y ait assez d'espace pour une autre piste de 200 pixels. Si vous ajoutez la fonction minmax(), Vous pouvez demander autant de pistes que nécessaire, d'une taille comprise entre 200 pixels et 1 fr. La grille dispose ensuite les pistes de 200 pixels, et tout l'espace restant leur est réparti de manière égale.

Cela permet de créer une mise en page responsive en deux dimensions sans requête média.

Il existe une légère différence entre auto-fill et auto-fit. Dans la prochaine démonstration, jouez avec une mise en page en grille utilisant la syntaxe expliquée ci-dessus. mais avec seulement deux éléments de grille dans le conteneur de la grille. Le mot clé auto-fill vous permet de voir que des pistes vides ont été créées. Remplacez le mot clé par auto-fit et les pistes se réduisent à 0. Cela signifie que les canaux flexibles s'agrandissent pour utiliser l'espace.

Par ailleurs, 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

Vous avez déjà vu le placement automatique dans la grille à l'œuvre dans les démonstrations jusqu'à présent. Les éléments sont placés sur la grille, un par cellule, dans l'ordre dans lequel ils apparaissent dans la source. Pour de nombreuses mises en page, cela pourrait suffire. Si vous avez besoin de plus de contrôle, deux options s'offrent à vous. La première consiste à modifier la mise en page du placement 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. À la place, vous pouvez placer les éléments dans des colonnes à l'aide de grid-auto-flow: column. Vous devez définir le suivi des lignes pour que les éléments créent des pistes de colonnes intrinsèques. et les mettre en page en une seule longue ligne.

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

Canaux couvrants

Il est possible que tout ou partie des éléments d'une mise en page placée automatiquement s'étendent sur plusieurs pistes. Utilisez le mot clé span et le nombre de lignes à couvrir comme valeur pour grid-column-end ou grid-row-end.

.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, utilise la valeur initiale de auto et est placé conformément aux 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 s'étendant sur plusieurs pistes peut entraîner une grille avec certaines cellules non remplies. Comportement par défaut de la mise en page sous forme de grille avec une mise en page positionnée automatiquement est de toujours progresser. Les articles seront placés dans l'ordre dans lequel ils sont dans la source, ou toute modification avec la propriété order. S'il n'y a pas assez d'espace pour accueillir un élément, la grille laissera un vide et passera à la piste suivante.

Ce comportement est illustré dans la prochaine démonstration. La case à cocher applique le mode de compression dense. Pour ce faire, attribuez la valeur dense à grid-auto-flow. Une fois cette valeur en place, la grille prend les éléments plus tard dans la mise en page et les utilise pour combler les lacunes. Cela peut signifier que l'écran est déconnecté de l'ordre logique.

Placer des éléments

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

Tout d'abord, gardez à l'esprit que la mise en page de la 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 est de les placer d'une ligne à l'autre. Vous découvrirez d'autres façons de placer des éléments dans ce guide, mais vous avez toujours accès à ces lignes numérotées.

Vous pouvez utiliser les propriétés suivantes pour placer des éléments par numéro de ligne:

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

Elles 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 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 des indications visuelles pour vous permettre de repérer l'emplacement de votre élément.

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

Empiler des éléments

Le positionnement basé sur les lignes 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 qu'un élément en chevauche partie un autre. Les éléments qui apparaissent plus tard dans la source sont affichés au-dessus des éléments précédents. Vous pouvez modifier cet ordre d'empilement en utilisant z-index, comme pour les éléments positionnés.

Nombres de lignes négatifs

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

Parfois, certains éléments s'affichent en dehors de cette grille explicite. Par exemple : vous pouvez définir des pistes de colonne, puis ajouter plusieurs lignes d'éléments de grille sans jamais en définir. La taille des pistes est définie automatiquement par défaut. 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éera des pistes pour que la mise en page fonctionne, Ces pistes sont appelées grille implicite.

La plupart du temps, cela n'a aucune incidence si vous travaillez avec une grille implicite ou explicite. Cependant, avec le placement basé sur les lignes, vous pouvez rencontrer 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 vers la droite le long de la grille explicite.

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

Vous pensez peut-être que vous pouvez lui attribuer la valeur grid-row: 1 / -1. La démonstration ci-dessous 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.

Dimensionner 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 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);
}

Créer des colonnes implicites avec un modèle de pistes de 100 pixels et de 200 pixels de largeur Dans ce cas, la première colonne implicite sera de 100 pixels, le second 200 px, le troisième 100 px, et ainsi de suite.

.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. Vous pouvez ajouter plusieurs noms, séparés par un espace entre les mêmes crochets. Une fois que vous avez nommé les 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 y placer des éléments. Cette technique est très pratique, car elle vous permet de voir à quoi ressemble votre composant directement dans le CSS.

Pour commencer, nommez les enfants directs de votre conteneur de grille à l'aide du Propriété grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Vous pouvez choisir le nom de votre choix, hormis les mots clés auto et span. Une fois tous vos éléments nommés, utilisez la grid-template-areas pour définir les cellules de grille pour chaque élément. 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";
}

Vous devez respecter certaines règles lorsque vous utilisez grid-template-areas.

• La valeur doit correspondre à une grille complète sans cellules vides.
• Pour parcourir 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 dissociées.

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

Pour laisser un espace blanc sur la grille, utilisez un ou plusieurs . sans espace entre eux. Par exemple, pour laisser la toute première cellule de la grille vide, vous pouvez 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 votre mise en page est définie en un seul endroit, il est facile de redéfinir la mise en page à l'aide de requêtes média. Dans l'exemple suivant, j'ai créé une mise en page à deux colonnes qui passe dans 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 la mise en page changer.

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

Propriétés des raccourcis

Il existe deux propriétés abrégées qui vous permettent de définir plusieurs propriétés de la grille en une seule fois. Ceux-ci peuvent sembler un peu déroutants jusqu’à ce que vous déterminiez exactement comment ils fonctionnent ensemble. C'est à vous de décider si vous souhaitez les utiliser ou si vous préférez utiliser les aiguilles.

grid-template

grid-template est un raccourci pour grid-template-rows, grid-template-columns et grid-template-areas. Les lignes sont définies en premier, ainsi que la valeur de grid-template-areas. Un dimensionnement de colonne est ajouté après un /.

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

grid établissement

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

• 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 en grille utilise les propriétés d'alignement que vous avez découvertes dans le guide flexbox. Dans la grille, les propriétés commençant par justify- sont toujours utilisées sur l'axe aligné. le sens dans lequel 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 volume, le sens de la disposition des blocs dans votre mode d'écriture.

• justify-content et align-content: répartissez l'espace supplémentaire dans le conteneur de la grille autour ou entre les pistes.
• justify-self et align-self: à un élément de grille pour le déplacer à l'intérieur de la zone 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 sur les éléments.

Répartition 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 avons de l'espace à la fois dans les dimensions d'alignement et de blocs de la grille. Essayez différentes valeurs pour align-content et justify-content pour voir le comportement des pistes.

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

Déplacement du contenu

Les éléments avec une couleur d'arrière-plan semblent remplir complètement la zone de 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 zone de la grille ne change pas de taille, Au lieu de cela, les éléments sont déplacés à l'intérieur de la zone définie.

Testez vos connaissances

Tester vos connaissances sur la grille

main {
  display: grid;
}

Ressources

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

• Mise en page de la grille CSS MN
• Guide complet sur 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 en mode grille