Grid.

Introduction.

Grid permet des mises en page plus complexes que Flex mais encore de nombreux modules Grid ne sont pas ou que partiellement supportés actuellement. Il est donc conseillé d'utiliser Grid pour le layout général puis Flex pour les éléments. Grid définit une grille (ensemble de colonnes et de lignes) sur laquelle on va disposer les différents blocs de contenus. La grille est aussi constituée de lignes de grilles qui séparent les colonnes et les lignes (elles sont aussi présentes sur chacun des bords du layout général). Pour utiliser Grid, on le déclare de la manière suivante:

.conteneur {
display: grid; | inline-grid;
}
									

Si je déclare deux éléments avec display: grid; ils apparaitront l'un en dessous de l'autre ( ce seront des éléments de type bloc). Par contre si je les déclare avec display: inline-grid; ils seront disposés sur la même ligne ( éléments de type inligne bloc).


Créer des colonnes.

Pour créer des colonnes nous utilisons la propriété: grid-template-columns. Il faut lui donner autant de valeurs qu'il y aura de colonnes, soit en PX, soit en pourcentage ou autre (il est possible de mixer les différentes unités).

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.

Le code:

.exemple-01 {
 display: grid;
 grid-template-columns: 50% 50%;	
 width: 70% ; 
 margin: 0 auto;
 border: 1px solid black;  
}

<div class="exemple-01">
		<div class="ex a">Bloc un.</div>		
		<div class="ex b">Bloc deux.</div>								
		<div class="ex c">Bloc trois.</div>								
		<div class="ex d">Bloc quatre.</div>								
		<div class="ex e">Bloc cinq.</div>								
		<div class="ex f">Bloc six.</div>														
</div>
									

Attention ! J'ai donnée une valeur max à ma grille: 70% du conteneur principal de ma page. Donc, si je définie une colonne avec 50%, cette dernière ne prendra que la place de 50% des 70% et si je définie mon autre colonne avec une valeur inférieur à la totalité de la largeur, les colonnes ne rempliront pas tout l'espace des 70% !

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.

Le code:

.exemple-02 {
 display: grid;
 grid-template-columns: 150px 50%;	
 width: 70% ; 
}

									

Avec des valeurs impairs (même code que exemple-01).

Bloc un.
Bloc deux.
Bloc trois.

Retour sur l'exemple-02 avec ajout de propriétés Flex pour changer le bloc trois et l'étendre sur la deuxième colonne. On constate que les propriétés Flex ne fontionnent qu'au sein de l'élément et n'agit pas sur la grille (ici la largeur de la colonne). Le code si-dessous ne change en rien au résultat de l'exemple-02.

Le code:

.exemple-02 {
 display: grid;
 grid-template-columns: 150px 50%;	
 width: 70% ; 
}


/* ajout au bloc trois */

.flexi-01 {
display: flex;
flex-direction: column | row;  /* avec ou sans, cela ne change rien */
flex-grow: 2;
}
									

Hauteur des lignes.

Pour gérer la hauteur des lignes, on utilise la propriété grid-templates-rows.

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.

Le code:

.exemple-03 {
 display: grid;
 grid-template-columns: 50% 50%;	
 grid-template-rows: 70px;
}
									

Pour modifier la hauteur de la ligne suivante, on ajoute une valeur suplémentaire à grid-template-rows. Mais si l'on veut ne modifier que certaines lignes, il suffit de laisser la valeur à auto pour les lignes qui ne necéssitent pas de modifications.

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.

Le code:

.exemple-04 {
 display: grid;
 grid-template-columns: 50% 50%;	
 grid-template-rows: 50px auto 40px;
}

									

Ce qui se passe avec du contenu:

Bloc un.

Ici un texte qui va remplir le ligne et même dépasser la hauteur de la ligne pour voir si le texte va dépasser de son parent !

Bloc deux.
Bloc trois.
Bloc quatre.

Ici un texte qui va remplir le ligne et même dépasser la hauteur de la ligne pour voir si le texte va dépasser de son parent !

Bloc cinq.
Bloc six.

Maintenant avec des valeurs en pourcentage. Attention ! Pour que des valeurs en pourcentages soient prises en compte, il faut impérativement donner une height au conteneur ! Comme on peut le voir, la troisième ligne sort du bloc parent... Le total des valeurs est supérieur à 250px...

Bloc un.

Ici un texte qui va remplir le ligne et même dépasser la hauteur de la ligne pour voir si le texte va dépasser de son parent !

Bloc deux.
Bloc trois.
Bloc quatre.

Ici un texte qui va remplir le ligne et même dépasser la hauteur de la ligne pour voir si le texte va dépasser de son parent !

Bloc cinq.
Bloc six.

Le code:

.exemple-05 {
 display: grid;
 grid-template-columns: 50% 50%;	
 grid-template-rows: 50px auto 60%;
 width: 70% ; 
 height: 250px;
 margin-bottom: 100px;
 border: 2px solid black;  
}

.eTrans {
	background-color: #5652C2; /* lavande */
	opacity: 0.7;
}

.fTrans {
	background-color: #FF0900; /* rouge */
	opacity: 0.7;
}

.ex {
	font-family: "Roboto", sans-serif;
	color: #000;
	/* opacity: 1; */ écrase la valeur de eTrans et de fTrans
}
									

Remarques: en mettant opacity à une valeur inférieur à 1, c'est tous les layers du bloc (couleur de fond et couleur police) qui sont affectés par cette valeur ainsi que la bordure du bloc parent... Essayer plutôt avec un "bgcolor rgba"... Inutile de mettre ex avec opacity:1; pour garder la couleur du texte, le CSS s'éxécute dans l'ordre et donc si je mets une valeur à "1", elle va écraser la précédente !


Articles connexes:

Basique.

Test formulaire 01 (sans mise en forme).[ GO! ]

Test formulaire 02 (mise en forme).[ GO! ]

Test formulaire 03 (label dessus champs).[ GO! ]

Intermédiare.

Test formulaire 04 (en cours).[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/12/2020