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.
- 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.
- 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.
- Les lignes et les zones de la grille peuvent être nommées pour faciliter le positionnement.
- L'espace libre dans le conteneur de la grille peut être réparti entre les pistes.
- 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.
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()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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:
Elles comportent des raccourcis qui vous permettent de définir simultanément les lignes de début et de fin:
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
etalign-content
: répartissez l'espace supplémentaire dans le conteneur de la grille autour ou entre les pistes.justify-self
etalign-self
: à un élément de grille pour le déplacer à l'intérieur de la zone dans laquelle il est placé.justify-items
etalign-items
: sont appliqués au conteneur de la grille pour définir toutes les propriétésjustify-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
Parmi les propositions suivantes, lesquelles correspondent à des termes de la grille CSS ?
main { display: grid; }
Quelle est l'orientation par défaut de la mise en page d'une grille ?
grid-auto-flow: column
était présent, une grille serait mise en page sous forme de colonnes.Quelle est la différence entre auto-fit
et auto-fill
?
auto-fit
étire les cellules pour les adapter au conteneur, contrairement à auto-fill
.auto-fill
place autant d'éléments que possible dans le modèle, sans l'étirer. Avec Fit, on les adapte.auto-fit
étire un conteneur pour l'adapter aux enfants, où auto-fill
les adapte au conteneur.Qu'est-ce que min-content
?
min-content
est relative aux mots et aux images de la zone.min-content
ne fait pas référence aux lettres.min-content
.Qu'est-ce que max-content
?
max-content
ne fait pas référence aux lettres.min-content
.Qu'est-ce que le placement automatique ?
grid-area
et sont placés dans cette cellule.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.