Grid

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

En-tête avec logo et navigation, avec une barre latérale et une zone de contenu présentant un article

Au fil des ans, de nombreuses méthodes ont été proposées pour résoudre ce problème de mise en page. Toutefois, avec la grille CSS, non seulement la mise en page est relativement simple, mais vous disposez de nombreuses options. La grille est particulièrement utile pour combiner le contrôle que la mise à l'échelle externe offre avec la flexibilité de la mise à l'échelle 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. C'est-à-dire de les organiser 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. Vous placez ensuite des éléments sur cette grille ou autorisez le navigateur à les placer automatiquement dans les cellules que vous avez créées. Les grilles sont très nombreuses, mais grâce à un aperçu de ce qui est disponible, vous pourrez créer des mises en page en grille en un rien de temps.

Présentation

Que pouvez-vous faire avec la grille ? Les mises en page en grille présentent les caractéristiques suivantes : Vous en apprendrez davantage à leur sujet dans ce guide.

  1. Une grille peut être définie avec des lignes et des colonnes. Vous pouvez choisir la taille de ces canaux de ligne et de colonne, ou ils 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. Vous pouvez nommer les lignes et les zones de la grille pour faciliter le placement.
  5. L'espace disponible dans le conteneur de grille peut être réparti entre les canaux.
  6. Les éléments de la grille peuvent être alignés dans leur zone.

Terminologie de la grille

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

Quadrillage

Une grille est composée de lignes horizontales et verticales. Si votre grille comporte quatre colonnes, elle comportera cinq lignes de colonnes, y compris celle après la dernière colonne.

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

Représentation schématique des lignes de grille

Lignes de la grille

Un rail correspond à l'espace entre deux lignes de grille. Un canal de ligne se trouve entre deux lignes de ligne, et un canal de colonne entre deux lignes de colonne. Lorsque nous créons notre grille, nous créons ces canaux en leur attribuant une taille.

Représentation schématique d'un rail de grille

Cellule de grille

Une cellule de grille est le plus petit espace d'une grille, défini par l'intersection des canaux de ligne et de colonne. Il s'agit d'une cellule de tableau ou d'une cellule de feuille de calcul. Si vous définissez une grille et que vous ne placez aucun élément, ils seront automatiquement disposés dans chaque cellule de la grille définie.

Représentation schématique d'une cellule de grille

Zone de la grille

Plusieurs cellules de grille réunies Pour créer des zones de grille, vous devez faire en sorte qu'un élément s'étende sur plusieurs pistes.

Représentation schématique d'une zone de grille

Lacunes

Bordure ou ruelle entre les voies. À des fins de dimensionnement, ils se comportent comme un canal standard. Vous ne pouvez pas placer de contenu dans un espace, mais vous pouvez étendre les éléments de la grille sur celui-ci.

Représentation schématique d'une grille avec des espaces

Conteneur de grille

Élément HTML auquel display: grid est appliqué, ce qui crée un nouveau 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 qui est un enfant direct du conteneur de 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 canaux de colonnes, deux canaux de lignes et un espace de 10 pixels entre les canaux, 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 sur la terminologie. Il comporte trois canaux de colonnes. Chaque piste utilise une unité de longueur différente. Il comporte deux canaux de ligne, l'un utilisant une unité de longueur et l'autre automatique. Lorsqu'il est utilisé comme taille de piste, la taille automatique peut être considérée comme aussi grande que le contenu. Par défaut, les pistes sont redimensionnées automatiquement.

Si l'élément de classe .container comporte des éléments enfants, ils seront immédiatement mis en page sur cette grille. Vous pouvez voir ce comportement dans la démonstration ci-dessous.

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

Ouvrez la démo dans Chrome. Inspectez l'élément à l'arrière-plan gris, dont l'ID est container. Mettez en surbrillance la grille en sélectionnant le badge de la grille dans le DOM, à côté de l'élément .container. Dans l'onglet "Mise en page", sélectionnez Afficher les numéros de ligne dans le menu déroulant pour afficher les numéros de ligne sur votre grille.

Comme décrit dans la légende et les instructions
Grille mise en surbrillance dans les outils pour les développeurs Chrome, affichant les numéros de ligne, les cellules et les canaux.

Mots clés de dimensionnement intrinsèque

En plus des dimensions de longueur et de pourcentage décrites dans la section sur les unités de dimensionnement, les canaux de grille peuvent utiliser des mots clés de dimensionnement intrinsèque. Ces mots clés sont définis dans la spécification de dimensionnement des boîtes et ajoutent des méthodes supplémentaires de dimensionnement des boîtes en CSS, et pas seulement des canaux de grille.

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

Le mot clé min-content réduit la taille d'un canal au maximum sans que son contenu ne déborde. Si vous modifiez la mise en page de la grille pour qu'elle comporte trois colonnes de la taille 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 s'affiche dans une longue chaîne continue. Cela peut entraîner des débordements, car la chaîne ne sera pas mise en forme.

La fonction fit-content() se comporte comme max-content au début. Toutefois, une fois que le canal atteint la taille que vous transmettez à la fonction, le contenu commence à se chevaucher. fit-content(10em) crée donc un canal de moins de 10 em, si la taille de max-content est inférieure à 10 em, mais jamais supérieure à 10 em.

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

Unité fr

Nous proposons des dimensions de longueur et des pourcentages existants, ainsi que ces nouveaux mots clés. Il existe également une méthode de dimensionnement spéciale qui ne fonctionne que dans la mise en page en grille. Il s'agit de l'unité fr, une longueur flexible qui décrit une part de l'espace disponible dans le conteneur de grille.

L'unité fr fonctionne de la même manière que l'utilisation de flex: auto dans Flexbox. Il répartit l'espace une fois les éléments mis en page. Pour que trois colonnes reçoivent toutes la même part de l'espace disponible:

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

Comme l'unité fr répartit l'espace disponible, elle peut être combinée à un espace ou à des canaux de taille fixe. Pour créer un composant avec un élément de taille fixe et que le deuxième canal occupe tout l'espace restant, vous pouvez utiliser une liste de pistes grid-template-columns: 200px 1fr.

Si vous utilisez des valeurs différentes pour l'unité fr, l'espace sera partagé proportionnellement. Plus la valeur est élevée, plus l'espace disponible est utilisé. Dans la démonstration ci-dessous, modifiez la valeur du troisième canal.

Fonction minmax()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Cette fonction vous permet de définir une taille minimale et maximale pour un canal. Cela peut être très utile. Prenons l'exemple de l'unité fr ci-dessus, qui distribue l'espace restant. Elle peut être écrite à l'aide de minmax() comme 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 ne pouvez pas obtenir des canaux qui ont chacun une part égale de tout l'espace disponible dans le conteneur de grille.

Pour forcer un canal à occuper une part égale de l'espace dans le conteneur de grille, moins les espaces, utilisez minmax. Remplacez 1fr comme taille de piste par minmax(0, 1fr). La taille minimale de la piste est donc de 0, et non de min-content. La grille utilisera ensuite toute la taille disponible dans le conteneur, déduira la taille nécessaire pour les éventuels espaces et répartira le reste en fonction de vos unités fr.

Format repeat()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 76.
  • Safari: 10.1.

Source

Si vous souhaitez créer une grille de canaux à 12 colonnes avec des colonnes de même taille, vous pouvez utiliser le code 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));
}

La fonction repeat() permet de répéter n'importe quelle section de votre liste de titres. Par exemple, vous pouvez répéter un motif de pistes. Vous pouvez également inclure des pistes régulières 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 la taille des pistes, minmax() et la répétition pour créer un modèle utile avec une mise en page en grille. Vous ne souhaitez peut-être pas spécifier le nombre de canaux de colonnes, mais plutôt 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 crée autant de pistes de 200 pixels que possible dans le conteneur. Ouvrez la démonstration dans une nouvelle fenêtre et observez comment la grille change lorsque 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 toutefois pas flexibles. Un espace apparaîtra à la fin jusqu'à ce qu'il y ait suffisamment d'espace pour un autre canal 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 1 fr. La grille organise ensuite les canaux de 200 pixels, et l'espace restant est réparti équitablement entre eux.

Cela crée une mise en page responsive bidimensionnelle sans avoir besoin de requêtes multimédias.

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 à l'aide de la syntaxe expliquée ci-dessus, mais avec seulement deux éléments de grille dans le conteneur de grille. À l'aide du mot clé auto-fill, vous pouvez voir que des canaux vides ont été créés. Remplacez le mot clé par auto-fit. Les pistes se réduisent alors à une taille de 0. Cela signifie que les rails flexibles se développent pour occuper l'espace.

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 le premier canal est rempli.

Emplacement sélectionné automatiquement

Vous avez déjà vu le positionnement automatique de la grille dans les démonstrations précédentes. 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 peut suffire. Si vous avez besoin de plus de contrôle, vous pouvez effectuer plusieurs opérations. La première consiste à ajuster la mise en page d'emplacement automatique.

Placer des éléments dans des colonnes

Par défaut, la mise en page en grille place les éléments le long des lignes. Vous pouvez plutôt placer les éléments dans des colonnes à l'aide de grid-auto-flow: column. Vous devez définir des canaux de ligne, sinon les éléments créeront des canaux de colonne intrinsèques et seront disposés sur une seule longue ligne.

Ces valeurs concernent le mode d'écriture du document. Une ligne s'affiche toujours dans la direction d'une phrase dans le mode d'écriture du document ou du composant. Dans la prochaine démonstration, vous pouvez modifier la valeur de grid-auto-flow et la propriété writing-mode.

Canaux chevauchants

Vous pouvez faire en sorte que certains ou tous les éléments d'une mise en page placée automatiquement s'étendent sur plusieurs canaux. 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, la valeur initiale de auto est utilisée et est placée conformément aux règles d'emplacement automatique. Vous pouvez également spécifier la même chose à l'aide de l'abréviation grid-column:

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

Combler les lacunes

Une mise en page placée automatiquement avec des éléments couvrant plusieurs canaux peut entraîner une grille avec des cellules non remplies. Le comportement par défaut de la mise en page en grille avec une mise en page entièrement automatique consiste à toujours progresser. Les éléments seront placés dans l'ordre dans lequel ils se trouvent dans la source ou selon toute modification apportée à la propriété order. Si l'espace est insuffisant pour un élément, la grille laisse un espace et passe à la piste suivante.

La prochaine démonstration illustre ce comportement. La case à cocher applique le mode d'emballage dense. Pour ce faire, attribuez à grid-auto-flow la valeur dense. Une fois cette valeur définie, la grille récupère les éléments plus tard dans la mise en page et les utilise pour combler les espaces. Cela peut entraîner la déconnexion de l'affichage de l'ordre logique.

Placer des éléments

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

Tout d'abord, gardez à l'esprit que la mise en page CSS Grid 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 aurez 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:

Ils disposent de raccourcis qui vous permettent de définir les lignes de début et de fin en même temps:

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 peuvent vous fournir un guide visuel des lignes afin de vérifier 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 d'écriture ou la direction pour voir comment l'emplacement des éléments reste cohérent avec le flux du texte.

Empilement d'é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 faire en sorte qu'un élément chevauche partiellement un autre. Les éléments qui apparaissent plus tard dans la source s'affichent au-dessus des éléments qui apparaissent plus tôt. Vous pouvez modifier cet ordre d'empilement à l'aide de 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 que l'on appelle une grille explicite. Il s'agit d'une grille que vous avez définie et à laquelle vous avez attribué une taille pour les pistes.

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

La plupart du temps, cela n'a aucune importance si vous travaillez avec une grille implicite ou explicite. Toutefois, avec l'emplacement basé sur des lignes, vous pouvez rencontrer la principale différence entre les deux.

Les numéros de ligne négatifs vous permettent de 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'étende de la première à la dernière ligne de la colonne. Dans ce cas, vous pouvez utiliser grid-column: 1 / -1. L'élément s'étendra sur toute la grille explicite.

Toutefois, cette méthode ne fonctionne que pour la grille explicite. Prenons une mise en page de trois lignes d'éléments placés automatiquement, où le tout premier élément doit s'étendre jusqu'à la ligne de fin de la grille.

Barre latérale avec huit éléments de grille frères

Vous pourriez penser que vous pouvez attribuer grid-row: 1 / -1 à cet élément. Dans la démonstration ci-dessous, vous pouvez constater que cela ne fonctionne pas. Les pistes sont créées dans la grille implicite. Il n'est pas possible d'atteindre la fin de la grille à l'aide de -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 la taille 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 motif de canaux de 100 px et 200 px de large. Dans ce cas, la première colonne implicite sera de 100 px, la deuxième de 200 px, la troisième de 100 px, et ainsi de suite.

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

Lignes de quadrillage nommées

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

.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. Il s'agit d'une excellente technique, car elle vous permet de voir à quoi ressemble votre composant directement dans le 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 choisi librement, à l'exception des mots clés auto et span. Une fois que vous avez nommé tous vos éléments, utilisez la propriété grid-template-areas pour définir les cellules de grille sur lesquelles chaque élément s'étendra. 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";
}

L'utilisation de grid-template-areas est soumise à certaines règles.

  • La valeur doit être 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 doivent 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 est supprimée.

Pour laisser un espace négatif sur la grille, utilisez un . ou plusieurs sans espace négatif entre eux. Par exemple, pour laisser la toute première cellule de la grille vide, je peux 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";
}

Étant donné que l'ensemble de votre mise en page est défini au même endroit, il est facile de la redéfinir à l'aide de requêtes multimédias. 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 modifier la taille de la fenêtre d'affichage et voir la mise en page évoluer.

Vous pouvez également voir comment la propriété grid-template-areas se rapporte à writing-mode et à la direction, comme avec les autres méthodes de grille.

Propriétés abrégées

Il existe deux propriétés abrégées qui 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 compreniez exactement comment elles fonctionnent ensemble. C'est à vous de choisir si vous souhaitez les utiliser ou préférer les gestes longs.

grid-template

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

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

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

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

  • 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 mode grille utilise les mêmes propriétés d'alignement que celles que vous avez étudiées dans le guide sur les grilles Flexbox. Dans la grille, les propriétés commençant par justify- sont toujours utilisées sur l'axe en ligne, c'est-à-dire dans la direction dans laquelle les phrases s'affichent dans votre mode d'écriture.

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

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

Distribuer l'espace supplémentaire

Dans cette démonstration, la grille est plus grande que l'espace nécessaire pour organiser les canaux de largeur fixe. Cela signifie que nous avons de l'espace dans les dimensions en ligne et en bloc de la grille. Essayez différentes valeurs pour align-content et justify-content afin de voir comment les pistes se comportent.

Notez que les écarts sont plus importants lorsque vous utilisez des valeurs telles que space-between, et que tout élément de grille couvrant deux canaux augmente é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 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 dans la zone définie.

Vérifier vos connaissances

Tester vos connaissances sur la grille

Parmi les termes suivants, lesquels font référence à la grille CSS ?

cercles
lacunes
cellules
titres
apprend
zones
lines
main {
  display: grid;
}

Quel est le sens de mise en page par défaut d'une grille ?

Lignes
Colonnes

Quelle est la différence entre auto-fit et auto-fill ?

auto-fit étire un conteneur pour qu'il s'adapte aux enfants, tandis que auto-fill adapte les enfants au conteneur.
auto-fit étire les cellules pour les adapter au conteneur, contrairement à auto-fill.

Qu'est-ce que min-content ?

La plus petite lettre
Identique à 0%
Mot ou image le plus long.

Qu'est-ce que max-content ?

Le mot le plus long.
Lettre la plus longue.
La phrase la plus longue ou l'image la plus grande.

Qu'est-ce que l'emplacement automatique ?

Lorsque des éléments de grille non attribués sont placés à côté dans un modèle de mise en page.
Lorsque des éléments enfants de la grille ont reçu une grid-area et sont placés sur cette cellule.
Lorsque la grille prend les éléments enfants et les place dans l'ordre le plus approprié en fonction des heuristiques du navigateur.

Ressources

Ce guide vous a présenté les différentes parties de la spécification de mise en page en grille. Pour en savoir plus, consultez les ressources suivantes.