Les pistes implicites du système de grille en CSS

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 :

  1. Un élément de la grille est positionné en dehors de la grille explicite.
  2. Les éléments sont trop nombreux et ne rentrent pas dans la grille explicite.

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;
}
Élément positionné en dehors de la grille
Élément positionné en dehors de la grille

Autoriser les pistes explicites

Par défaut, les pistes implicites ne seront pas visibles. Pour les afficher, 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 vous 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 si 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.

Articles connexes

Sauf mention contraire*, l'article Les pistes implicites du système de grille en CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.