Apprenez à créer des sites Web bidimensionnels avec CSS Grid

Avec CSS Grid, vous pouvez créer des mises en page de site Web en deux dimensions en deux fois moins de temps que d'habitude.

CSS Grid est le successeur du système de mise en page flottante, et bien qu'il existe encore des cas où l'utilisation de la structure de mise en page flottante peut s'avérer plus pratique que l'utilisation de CSS Grid, certains développeurs ont tendance à n'utiliser que CSS Grid pour structurer leurs sites Web.

Ce n'est pas une surprise car CSS Grid est un outil puissant à avoir dans votre arsenal. Ce guide vous apprendra comment utiliser CSS Grid dans tous vos projets de développement Web.

Comment fonctionne le système de grille CSS

CSS Grid (ou simplement Grid) est essentiellement un système de mise en page de site Web en deux dimensions utilisé pour structurer les éléments d'une page Web. Le système de mise en page CSS Grid est construit sur un concept parent-enfant, où vous auriez un conteneur principal (le parent) et plusieurs éléments de grille différents (les enfants) dans ce conteneur.

Pour utiliser CSS Grid sur n'importe quel site Web, vous devez d'abord initialiser le conteneur Grid. Pour ce faire, définissez la propriété d'affichage de l'élément parent prévu sur la valeur de grid.

Exemple de conteneur de grille CSS

 
selector{
 display: grid;
 }

Le sélecteur peut être un élément HTML, une classe ou un identifiant; l'important est qu'il identifie directement l'élément HTML qui englobe tous les autres éléments HTML de la page Web.

Dans une structure de disposition de grille, tous les éléments du conteneur sont appelés éléments de grille . Par défaut, la disposition de la grille CSS est verticale (qui est également la structure de mise en page par défaut en HTML), donc lorsqu'une grille CSS est initialisée à l'aide de la propriété d'affichage au-dessus de la disposition des éléments de la grille reste la même (verticale).

Pour réorganiser les éléments de la grille sur la page Web, vous devrez utiliser la propriété grid-template-columns , la propriété grid-template-rows ou une combinaison des deux.

C'est pourquoi CSS Grid est identifié comme un système de mise en page bidimensionnel; il vous permet de structurer vos éléments de grille à la fois horizontalement (lignes) et verticalement (colonnes) en même temps.

Utilisation de la propriété Grid-template-columns

La propriété grid-template-columns doit toujours être utilisée dans l'élément container à côté de la propriété display. Avec la propriété grid-template-columns , vous pouvez spécifier le nombre de colonnes que vous souhaitez dans votre disposition CSS Grid, de plusieurs manières.

Une façon de structurer vos éléments de grille consiste à utiliser des pixels (px).

Exemple de structure d'éléments de grille avec des pixels

 
.gridContainer{
 display: grid;
 grid-template-columns: 400px 400px 400px;
 }

Il y a deux choses que vous devez noter dans l'exemple ci-dessus. La première est que l'utilisation du code ci-dessus créera trois colonnes d'une largeur de 400 px chacune sur votre page Web. Si vous avez moins de trois éléments de grille dans votre conteneur, vous n'aurez qu'une ou deux colonnes affichées sur votre écran.

Cependant, si le nombre d'éléments de grille dans votre conteneur dépasse trois, chaque groupe de trois éléments de grille sera placé sur une nouvelle ligne, jusqu'à ce qu'ils soient terminés.

La deuxième chose à noter est que l'utilisation de valeurs px pour structurer vos éléments de grille n'est pas une approche très pratique. Ceci est principalement dû au fait que l'unité de pixels ne prend pas en charge la conception réactive .

Revenez à l'exemple ci-dessus; si nous avions six éléments de grille dans notre conteneur, les deux éléments de grille à gauche ne seraient pas immédiatement visibles sur une tablette.

Une alternative recommandée à l'utilisation de px (ou de toute autre valeur fixe) pour mettre en page vos éléments de grille consiste à utiliser des fractions (unités fr).

Exemple d'utilisation des valeurs de fraction

 
.gridContainer{
 display: grid;
 grid-template-columns: 1fr 2fr;
 }

Le code ci-dessus générera deux colonnes sur la page Web prévue. La colonne de droite sera deux fois plus large que celle de gauche. La principale raison pour laquelle l'utilisation de fr est recommandée est que fr prend en charge la réactivité.

Par conséquent, quelle que soit la taille de l'écran sur un appareil, la colonne de droite sera toujours deux fois plus grande que celle de gauche.

Cette mise en page est populaire dans les cas où il y a une section de côté sur une page Web. La colonne de plus petite taille serait réservée à la section de côté, qui contiendrait du contenu lié au flux principal, mais ne faisant pas partie du flux principal (comme une table des matières).

Utilisation de la propriété Grid-template-rows

Les critères d'utilisation de la propriété grid-template-rows sont quelque peu identiques à ceux de la propriété grid-template-columns.

Une différence évidente est que là où la propriété grid-template-rows crée des lignes, la propriété grid-template-columns crée des colonnes. Cependant, il existe d'autres différences plus subtiles entre les deux propriétés (telles que les lignes implicites et la structure de ligne globale).

La structure des lignes

Pour revenir à l'exemple d'utilisation des valeurs de fraction ci-dessus, si ce code est utilisé sur plus de deux éléments, les éléments supplémentaires s'enrouleront en créant des lignes supplémentaires avec deux colonnes jusqu'à ce que tous les éléments soient dans la grille.

Ce n'est pas le cas avec la propriété grid-template-rows . Prenons l'exemple suivant.

Exemple de Grid-template-rows

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 }

Si le code CSS ci-dessus est conçu pour cibler un document HTML contenant cinq balises <div> qui sont chacune des enfants directs de l'élément de classe gridContainer, alors le premier élément conservera sa hauteur par défaut et le deuxième élément aura une hauteur qui est trois fois la taille du premier.

Le problème devient apparent lorsque vous atteignez le troisième élément div; vous constaterez qu'au lieu de s'enrouler et de créer une deuxième colonne, les lignes continueront sans interruption sur l'écran. Ces lignes sont appelées lignes implicites car elles ne seront pas affectées par le code ci-dessus et continueront de conserver leur hauteur par défaut.

Ces lignes implicites peuvent être ciblées à l'aide de la propriété grid-auto-rows .

Utilisation de la propriété Grid-auto-rows

La propriété grid-auto-rows est souvent utilisée pour attribuer une hauteur aux lignes d'une grille qui se trouve en dehors de la plage de la propriété grid-template-rows .

Exemple de lignes automatiques de grille

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 grid-auto-rows: 3fr;
 }

Si le code CSS ci-dessus est utilisé pour cibler un conteneur qui englobe directement cinq éléments de grille, la propriété grid-template-rows ci-dessus s'appliquera aux deux premiers éléments de grille, tandis que la propriété grid-auto-row s'appliquera aux trois autres éléments — résolvant efficacement le problème des lignes implicites.

Bien que vous puissiez utiliser les colonnes grid-template-row et grid-template-columns séparément si nécessaire, il est recommandé d'utiliser la grille CSS lorsque des mises en page bidimensionnelles (lignes et colonnes) sont requises. Si le besoin est uniquement d'une mise en page unidimensionnelle (lignes ou colonnes), une structure de mise en page flottante serait une bien meilleure option.

Structurer la mise en page de votre site Web n'a jamais été aussi simple

Avec CSS Grid, vous pouvez créer un site Web en deux dimensions, construit sur un concept parent-enfant. Les choses dont vous devez vous souvenir pour rendre cela possible comprennent:

• Attribution de la valeur de grille à la propriété d'affichage dans l'élément conteneur.
• Utilisation des lignes de modèle de grille et des colonnes de modèle de grille dans l'élément conteneur.
• Utilisation de la propriété grid-auto-row lorsque la quantité d'éléments dans l'élément conteneur dépasse ce que la propriété grid-template-rows cible.

Le dernier point à retenir est de vous assurer que vous utilisez efficacement la grille CSS sur des structures de mise en page bidimensionnelles. Lorsqu'une structure de mise en page unidimensionnelle est requise, la structure de mise en page flottante peut s'avérer être une meilleure option.