CSS Grid Module layout Init

Introduction

CSS Grid Layout est un système de mise en page à deux dimensions pour le Web.
Ce qui vous permet de disposer le contenu en lignes et en colonnes.
Il possède de nombreuses fonctionnalités qui facilitent la construction de mises en page complexes et est très utilisé.

Qu'est-ce qu'une grille ?

Une grille est un ensemble de lignes horizontales et verticales créant un modèle contre lequel nous pouvons aligner nos éléments de conception.
Ils nous aident pour créer des mises en page dans lesquelles nos éléments ne sauteront pas ou ne changeront pas de largeur au fur et à mesure que nous passons de page en page, offrant une plus grande cohérence sur nos sites Web.

[image grid from free code camp] — Source : free code camp

Une grille comporte généralement des colonnes (columns), des lignes (rows), puis des espaces entre chacune ligne et colonne.
Ces espaces sont communément appelés gouttières (gutters).

[image grid from drafts.csswg.org] — Source : drafts.csswg.org

La vidéo suivante fourni une bonne explication visuelle de l'utilisation des Grilles CSS :

Créons une grille CSS

Pour définir une grille (grid) nous donnons la valeur 'grid' à la propriété display.
Comme avec Flexbox, cela active la mise en page en grille et tous les enfants directs du conteneur deviennent des éléments de la grille.


            .container {
              display: grid;
            }

Contrairement à Flexbox, les éléments ne seront pas immédiatement différents. Déclarer display: grid vous donne une grille à une colonne, donc vos éléments continueront à s'afficher l'un en dessous de l'autre comme ils le font normalement dans le flux (flow) d'affichage.

Pour voir quelque chose qui ressemble plus à une grille, nous devrons ajouter quelques colonnes à la grille.
Ajoutons trois colonnes de 200 pixels.
Vous pouvez utiliser n'importe quelle unité de longueur ou de pourcentage pour créer ces colonnes.


            .container {
              display: grid;
              grid-template-columns: 200px 200px 200px;
            }

Grille Flexible grâce à l'unité fr

En plus de créer des grilles à l'aide de longueurs et de pourcentages, nous pouvons utiliser l'unité fr pour dimensionner de manière flexible les lignes et les colonnes de la grille.
Cette unité représente une fraction de l'espace disponible dans le conteneur de la grille.


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

Un

Deux

Trois

Quatre

Cinq

En orange les pistes (tracks)

Nous avons maintenant des pistes(tracks) flexibles.
L'unité fr distribue l'espace proportionnellement.
Donc, si vous spécifiez différentes valeurs positives pour vos pistes comme ceci :


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

Un

Deux

Trois

Quatre

Cinq

La première piste obtient maintenant 2fr de l'espace disponible et les deux autres pistes obtiennent 1fr, rendant la première piste plus grande.
Vous pouvez mélanger des unités fr avec des unités de longueur fixe — dans ce cas, l'espace nécessaire pour les pistes fixes est utilisé en premier ; l'espace restant est ensuite réparti sur les autres pistes.

Remarque : L'unité fr distribue l'espace disponible, et non tout l'espace.
Par conséquent, si l'un de vos morceaux contient quelque chose de volumineux, il y aura moins d'espace libre à partager.

Espaces entre les pistes (tracks)

Pour créer des espaces entre les pistes, nous utilisons les propriétés column-gap pour les espaces entre les colonnes, row-gap pour les espaces entre les lignes et gap comme raccourci pour les deux.


            .container {
              display: grid;
              grid-template-columns: 2fr 1fr 1fr;
              gap: 20px;
            }

Ces écarts peuvent être de n'importe quelle unité de longueur ou pourcentage, mais pas une unité fr.

Remarque : Les propriétés *gap étaient préfixées par grid-, mais cela a été modifié dans spécification récente afin de les rendre utilisables dans plusieurs méthodes de mise en page.
Les versions préfixées seront conservées en tant qu'alias, elles pourront donc être utilisées en toute sécurité pendant un certain temps.
Pour plus de sécurité, vous pouvez doubler et ajouter les deux propriétés pour rendre votre code plus robuste.


            .container {
              display: grid;
              grid-template-columns: 2fr 1fr 1fr;
              grid-gap: 20px;
              gap: 20px;
            }

Répétition des listes de pistes

Vous pouvez répéter tout ou seulement une partie de votre liste de pistes à l'aide de la fonction CSS repeat .


            .container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);            
              gap: 20px;
            }

Nous allons maintenant obtenir trois pistes 1fr comme avant.
La première valeur transmise à la fonction de répétition spécifie le nombre de fois que vous souhaitez que la liste se répète, tandis que la seconde valeur est une liste de pistes, qui peut être une ou plusieurs pistes que vous souhaitez répéter.

La Grille Implicite et explicite

Nous n'avons spécifié que des pistes de colonne jusqu'à présent, mais des lignes sont créées pour contenir notre contenu.
Ceci est un exemple de la grille explicite par rapport à la grille implicite.
La grille explicite est celle que vous créez en utilisant grid-template-columns ou grid-template-rows.
La grille implicite est créée lorsque le contenu est placé en dehors de cette grille, comme dans nos lignes.

Par défaut, les pistes créées dans la grille implicite sont de taille auto, ce qui signifie en général qu'elles sont suffisamment grandes pour accueillir leur contenu.
Si vous souhaitez donner une taille aux pistes de grille implicites, vous pouvez utiliser les propriétés grid-auto-rows et grid-auto-columns.
Si vous ajoutez grid-auto-rows avec une valeur de 100px à votre CSS, vous verrez que ces lignes créées font maintenant 100 pixels de haut.


            .container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-auto-rows: 100px;            
              grid-gap: 20px;
            }

La fonction minmax()

Nos pistes hautes de 100 pixels ne seront pas très utiles si nous ajoutons du contenu dans ces pistes qui dépasse 100 pixels, auquel cas cela provoquerait un débordement.
Il serait peut-être préférable d'avoir des pistes qui sont d'au moins 100 pixels de hauteur et peuvent encore s'agrandir si du contenu est ajouté.
Un fait assez basique à propos du Web est que vous ne savez jamais vraiment quelle sera la hauteur d'un élément : contenu supplémentaire ou plus grand, les tailles de police peuvent causer des problèmes avec les conceptions qui tentent d'être parfaites au pixel près dans toutes les dimensions.

La fonction minmax() nous permet de définir une taille minimale et maximale pour une piste, par exemple, minmax(100px, auto).
La taille minimale est de 100 pixels, mais le maximum est auto, qui se développera pour accueillir plus de contenu.


            .container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-auto-rows: minmax(100px, auto);            
              gap: 20px;
            }

Si vous ajoutez du contenu supplémentaire, vous verrez que la piste s'agrandit pour lui permettre de s'adapter.
Notez que l'expansion se produit tout au long de la ligne.

Des colonnes autant que possible

Nous pouvons combiner certaines des leçons que nous avons apprises sur la liste des pistes, la notation de répétition et minmax() pour créer un modèle (pattern) utile.
Parfois, il est utile de pouvoir demander à la grille pour créer autant de colonnes que possible dans le conteneur.
Pour ce faire, nous définissons la valeur de grid-template-columns à l'aide de la fonction repeat(), mais au lieu de passer un nombre, passez le mot-clé auto-fill.
Pour le deuxième paramètre de la fonction, nous utilisons minmax() avec une valeur minimale égale à la taille de piste minimum que nous aimerions avoir et un maximum de 1fr.


            .container {
              display: grid;
              grid-template-columns: repeat(autofill, minmax(200px,1fr));
              grid-auto-rows: minmax(100px, auto);            
              gap: 20px;
            }

Cela fonctionne car la grille crée autant de colonnes de 200 pixels que le conteneur peut contenir, puis partage l'espace restant entre toutes les colonnes.
Le maximum est de 1fr, ce qui, comme nous le savons déjà, répartit l'espace uniformément entre pistes.

Placement par rapport à la ligne

Nous passons maintenant de la création d'une grille au placement des éléments sur la grille.
Notre grille comporte toujours des lignes.
Ces lignes sont numérotées, en commençant par 1.
Elles se rapportent au mode d'écriture du document.
Par conséquent, en anglais, la ligne de colonne 1 est sur le côté gauche de la grille et la ligne de ligne 1 en haut.
En arabe, la ligne de colonne 1 serait sur le côté droit puisque l'arabe s'écrit à droite de gauche.

Nous pouvons organiser les choses conformément à ces lignes en spécifiant la ligne de début et de fin.
Nous le faisons en utilisant les propriétés suivantes :

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Ces propriétés peuvent toutes avoir un numéro de ligne comme valeur.
Vous pouvez également utiliser les propriétés abrégées :

grid-column
grid-row

Ceux-ci vous permettent de spécifier les lignes de début et de fin à la fois, séparées par une barre oblique /.


            header {
              grid-column: 1 / 3;
              grid-row: 1;
            }
  
            article {
              grid-column: 2;
              grid-row: 2;
            }
  
            aside {
              grid-column: 1;
              grid-row: 2;
            }
  
            footer {
              grid-column: 1 / 3;
              grid-row: 3;
            }

Remarque : vous pouvez également utiliser la valeur -1 pour cibler la colonne ou la ligne de fin, puis compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives.
Notez également que les lignes comptent toujours à partir des bords de la grille explicite, pas la grille implicite.

Positionnement avec grid-template-areas

Remarque : vous pouvez également utiliser la valeur -1 pour cibler la colonne ou la ligne de fin, puis compter à partir de la fin en utilisant des valeurs négatives.
Remarquez aussi que les lignes comptent toujours à partir des bords de la grille explicite, pas de la grille implicite.


            .container {
              display: grid; 
              grid-template-areas:
                 "header header"
                 "sidebar content"
                 "footer footer";
              grid-template-columns: 1fr 3fr;
              gap: 20px;        
            }
  
            header {
              grid-area: header;            
            }
  
            article {
              grid-area: content;            
            }
  
            aside {
              grid-area: sidebar;            
            }
  
            footer {
              grid-area: footer;            
            }

Les règles pour grid-template-areas sont les suivantes :

Vous devez remplir toutes les cellules de la grille.
Pour couvrir deux cellules, répétez le nom.
Pour laisser une cellule vide, utilisez un . (point).
Les zones doivent être rectangulaires ; vous ne pouvez pas avoir une zone en forme de L par exemple.
Les zones ne peuvent pas être répétées à différents endroits.

En résumé

Dans cet aperçu, nous avons fait le tour des principales fonctionnalités de CSS Grid Layout.
Vous devriez pouvoir commencer à l'utiliser dans vos conceptions.
Pour approfondir les spécifications, lisez les guides MDN sur Grid Layout, qui peuvent être trouvés ci-dessous.

Pour aller plus loin

Références

Toute la documentation de cette page est tirée de MDN.