Les pistes implicites ou auto-générées (implict grid track) sont des pistes créent automatiquement. Apprenez donc à les exploiter quand cela devient nécessaire.
Qu’est-ce qu’une piste implicite ?
Les pistes implicites ou auto-générées (implict grid track) sont des pistes créent automatiquement. Elles sont opposées aux pistes explicites qui sont déclarées via les propriétés grid-template-columns et grid-template-rows.
Ces pistes implicites peuvent se créer pour deux raisons :
- Un élément de la grille est positionné en dehors de la grille définie explicitement.
- Les éléments sont trop nombreux et ne rentrent pas dans la grille définie explicitement.
Dans l’exemple ci-dessous, la grille est explicitement construite avec deux lignes et deux colonnes. L’élément C a été positionné en dehors de la grille explicite, une colonne a donc été ajoutée automatiquement. Il s’agit d’une piste implicite.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
...
}
.element-c {
grid-column-start: 3;
}
Dimensionner les pistes implicites
Pour dimensionner les pistes implicites, il faut indiquer leur valeur par défaut avec grid-auto-columns et/ou grid-auto-rows. Ainsi, si une piste doit être créée, elle le sera en fonction des dimensions fournies.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-auto-columns: 1fr;
grid-auto-rows: 100px;
}Pourquoi créer des pistes implicites ?
Il peut paraître bizarre d’autoriser la création de pistes implicites. Est-ce que cela ne veut pas dire que nous ne gérons plus notre interface correctement ? Explicitement ?
Évidemment, cela dépendra de la situation dans laquelle vous vous trouvez…
Prenons l’exemple concret d’une situation dans laquelle les pistes implicites vont nous simplifier la vie.
Vous souhaitez créer une galerie d’images avec une grille de quatre colonnes. Mais vous ne savez pas à l’avance combien vous allez avoir d’images dans votre galerie ou vous avez tout simplement plusieurs galeries avec un nombre d’images différent. Dans ce cas là, les pistes implicites sont idéales, il suffit de créer une grille explicite de quatre colonnes et de donner la hauteur des rangés des pistes implicites. Le nombre de rangés dépendra donc directement du nombre d’images dans la galerie.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr) ;
grid-auto-rows: 100px;
}Ajout de rangés ou de colonnes ?
Lorsque vous positionnez un élément en dehors de la grille, c’est la position de l’élément en question qui déterminera s’il faut ajouter des colonnes ou des rangés implicites.
Mais dans le cas d’un contenu trop important, le choix de la création d’une colonne ou d’une ligne sera alors déterminé par la valeur de la propriété grid-auto-flow.
Si la valeur est réglée sur column, les colonnes nécessaires seront créées implicitement si la valeur est réglée sur row, ce sera des rangés.
Dans la démonstration ci-dessous, les éléments roses sont placés dans la grille explicite. Les éléments gris ne rentrent pas. Des pistes doivent être créées. Changez la valeur de grid-auto-flow pour observer le comportement.
Si vous souhaitez que l’algorithme de positionnement essaye d’optimiser le positionnement des éléments en bouchant les trous qui peuvent être généré lorsque des éléments sont positionnés, vous pouvez utiliser les valeurs dense, row dense ou column dense.
Essayez donc de manipuler les différentes options de la démonstration ci-dessous pour comprendre ce comportement.
Masquer les pistes implicites
Si vous ne souhaitez pas afficher le contenu des pistes implicites, vous pouvez donner une hauteur nulle aux rangées implicites (ou une largeur nulle aux colonnes implicites) et gérer le débordement avec la valeur hidden pour la grille.
.grid {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 50px ;
grid-auto-rows: 0;
overflow:hidden;
}