Grille implicite/explicite

code du simulateur de Grid : télécharger

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 :

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.

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.