The CSS Podcast - 011: 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.
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.
- 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.
- Les enfants directs du conteneur de grille seront automatiquement placés sur cette grille.
- Vous pouvez également placer les éléments à l'endroit précis de votre choix.
- Vous pouvez nommer les lignes et les zones de la grille pour faciliter le placement.
- L'espace disponible dans le conteneur de grille peut être réparti entre les canaux.
- 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.
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.
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.
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.
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.
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.
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()
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()
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.
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
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
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
etalign-content
: distribuez de l'espace supplémentaire dans le conteneur de grille autour ou entre les canaux.justify-self
etalign-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
etalign-items
: sont appliqués au conteneur de grille pour définir toutes les propriétésjustify-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 ?
main { display: grid; }
Quel est le sens de mise en page par défaut d'une grille ?
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
?
Qu'est-ce que max-content
?
Qu'est-ce que l'emplacement automatique ?
grid-area
et sont placés sur cette cellule.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.