Création d'une grille :
.conteneur { display : grid; }
Création d'une grille explicite
Nous allons créer ici une grille d'une colonne en explicitant (en donnant) la taille de la colonne.
.conteneur {
display : grid;
grid-template-columns : 200px;
}
Nous voyons ici deux notions importantes :
Le premier bloc se place sur la première colonne. (grille explicite).
Mais, les trois autres blocs se placent eux aussi sur la première colonne sur des lignes non explicites (pas définies) dites implicites.
Remarque : La hauteur des lignes varies en fonction de la hauteur du conteneur et de chaque bloc.
la notion de grille explicite et implicite.
Le premier bloc se place sur la première colonne. (grille explicite).
Mais, les trois autres blocs se placent eux aussi sur la première colonne sur des lignes non explicites (pas définies) dites implicites.
Remarque : La hauteur des lignes varies en fonction de la hauteur du conteneur et de chaque bloc.
Création d'une grille implicite
Continuons à définir notre grille explicite en ajoutant deux lignes.
.conteneur {
display : grid;
grid-template-columns : 200px;
grid-template-rows : 1fr 200px;
}
Encore une fois, la grille explicite (définie 1col,2lig) permet de placer les deux blocs 1 et 2. Et, une grille implicite place les deux blocs 3 et 4.
La hauteur des lignes implicites est réduite dans notre exemple au minimum du fait principalement de la taille 1fr de la première ligne.
La hauteur des lignes implicites est réduite dans notre exemple au minimum du fait principalement de la taille 1fr de la première ligne.
Remarque :
La définition grid-template-rows : 50px 50px; donnerait des hauteurs de lignes explicites plus grandes (sans dépasser la hauteur totale du conteneur).
Hauteur des lignes implicites
On peut donner une valeur aux lignes implicites grid-auto-rows : 100px
Ainsi, à chaque fois d'un bloc est placé sur une ligne implicite, la ligne prendra cette valeur.