Conteneur: grid-template-columns et grid-template-rows¶
grid-template-columns¶
Permet de définir la taille de chaque colonne d'une grille. Le nombre de colonnes correspond au nombre de valeurs spécifiées.
Par exemple, trois valeurs produisent trois colonnes :
See the Pen Grid - grid-template-columns by TIM Montmorency (@tim-momo) on CodePen.
Info
Puisqu'il y a plus d'éléments que de colonnes, une 2e rangée est automatiquement créée afin d'accommoder tous les items. La première rangée est donc explicite tandis que la deuxième est implicite.
En savoir plus sur grid-template-columns
grid-template-rows¶
Permet de définir la taille de chaque rangée d'une grille. Le nombre de rangées correspond au nombre de valeurs spécifiées.
Par exemple, deux valeurs produisent deux rangées :
See the Pen Grid - grid-template-rows by TIM Montmorency (@tim-momo) on CodePen.
Info
Il aurait été possible de créer plus de rangées. Cependant, ces rangées auraient été vides puisqu'il n'y a seulement assez d'éléments pour combler deux rangées de trois colonnes.
En savoir plus sur grid-template-rows
Inspecteur¶
L'inspecteur est d'une aide précieuse lorsque l'on manipule des éléments en grid.
- Dans le DOM Tree, les éléments en
display: grid;oudisplay: inline-grid;sont mis en évidence grâce à un badge contenant le mot "grid". - Lorsque cliqué, ce badge met en surbrillance les divisions constituant la grille en question.
- Dans l'onglet Layout, il est possible d'afficher des informations supplémentaires : étendre les divisions afin de les rendre plus visibles, afficher la taille des colonnes et rangées, etc.