Bien comprendre les bases du display:grid

   Coucou !
   
   Comme l’a fait Mäven avec le display:flex, je te propose cette fois de nous intéresser à une autre type de display qui peut sauver nos mises en page dans certains cas : le display grid.
   
   
   Comme son nom l’indique, cette mise en page permet de créer des grilles avec des lignes et des colonnes. Ici, imagine que ta page web soit un quadrillage (un peu comme à la bataille navale) et que tu vas placer chacun de tes éléments HTML dessus de manière complètement indépendante. Tu pourras ainsi définir l'emplacement, mais aussi la taille de chaque élement
   
   À la différence du flex où les enfants ne peuvent suivre qu’une seule direction (en ligne ou en colonne), avec le grid, on peut faire un peu ce qu’on veut (une fois qu’on a compris comment l’utiliser (et là pour le coup, je t’avoue que moi-même je galère un peu :p)).
   
   Concrètement, cette mise en page peut nous servir pour :
   • faire en sorte que notre header soit toujours en haut de page et le footer soit toujours en bas du navigateur de quel que soit le contenu de la page ;
   • faire des grilles d’articles bien alignées ;
   • faire une disposition de page différente en mobile & desktop.
   
    Si tu connais déjà le grid et que tu l’as déjà utilisé dans des cas concrets, n’hésite pas à nous les partager à la suite du message ^^
   
   
   
   Pour commencer, on va définir un élément parent qui aura le display grid et qui sera notre référent. Visuellement, tu ne verras pas la grille. En revanche, si tu l'observes avec l’inspecteur d'éléments de ton navigateur (F12), tu pourras voir la grille apparaitre.
   
   
   Ici par exemple, j’ai défini une grille composées de 6 colonnes et 3 lignes
   

Code:


    <style>
        .d-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(3, 1fr);
    
            max-width: 600px;
            min-height: 200px;
            width: 100%;
        }
    </style>
    
    <div class="d-grid"></div>

   
   
   
   Comme tu peux le voir, ma grille est bien définie et chacune de mes cases fait la même taille (on reviendra sur les propriétés CSS un peu plus tard )
   
   
   On va ensuite définir dans cette grille, des élements enfants. Ces blocs seront placés verticalement sur une ou plusieurs colonnes et/ou horizontalement sur plusieurs lignes.
   Je peux ainsi avoir un élement qui va occuper 1 seule case et un autre qui en occupera 4.
   
   
   Cette fois, j'ai créé 5 div enfants et je les ai placées sur la grille. Comme tu peux le voir sur ma capture d'écran, ce n'est pas parce que mon élement 5 est le dernier qu'il est tout en bas de ma grille. Et pour réaliser cette mise en page, je n'ai pas du tout utilisé de position absolue !
   
   

Code:


    <style>
       .d-grid {
            column-gap: 5px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(3, 1fr);
            max-width: 600px;
            min-height: 200px;
            row-gap: 5px;
            width: 100%;
        }
    
        [class*='elt'] {
            background: rgba(226, 110, 38, 0.4);
            border: 2px solid #e26e26;
            border-radius: 5px;
            padding: 10px;
        }
    
        .elt--1 {
            grid-column: 2/6;
            grid-row: 2/3;
        }
    
        .elt--2 {
            grid-column: 6;
            grid-row: 3;
        }
    
        .elt--3 {
            grid-column: 1;
            grid-row: 1/4;
        }
    
        .elt--4 {
            grid-column: 3;
            grid-row: 2/4;
        }
    
        .elt--5 {
            grid-column: 4/7;
            grid-row: 1;
        }
    </style>
    
    <div class="d-grid">
        <div class="elt--1">Un</div>
        <div class="elt--2">Deux</div>
        <div class="elt--3">Trois</div>
        <div class="elt--4">Quatre</div>
        <div class="elt--5">Cinq</div>
    </div>

   
   
   
   
   Maintenant qu'on a vu le fonctionnement de base, accroche-toi bien parce que ça va se complexifier. Oui, oui, comme pour le flex, il existe une multitude de propriétés CSS liées au display grid. Ici, je ne vais te parler que de celles qu'on utilise le plus souvent.
   
    Personnellement, j'ai toujours le pense-bête d'Alsacreations ou ce site sous la main quand j'ai un doute :p
   
   
   Après avoir défini ton parent en display:grid, tu peux lui définir des lignes et des colums.
   
   Pour définir le nombre de colonnes, on va utilise grid-template-columns.
   Pour définir le nombre de lignes, on va utilise grid-template-rows.
   
   Ces deux propriétés peuvent prendre différentes valeurs. Tu peux définir manuellement chaque taille. Par exemple :
   

Code:

grid-template-columns: 10px 200px 30px 25px;

   ce qui signifie que :
   -> ma première colonne fera 10px de large ;
   -> la seconde en fera 200 ;
   -> la troisième fera 30px de large ;
   -> la dernière en fera 25.
   
   Mais on peut aussi, si nos colonnes ou lignes font toutes la même taille, utiliser repeat(). Par exemple :
   

Code:

grid-template-columns: repeat(4, 200px);

   Ici, j'indique que j'aurai 4 colonnes par ligne et que chacune d'elle fera 200px de large.
   
   Ce n'est pas tout ! Tu peux aussi laisser gérer ton conteneur en lui disant : je veux avoir X colonnes ou X lignes et je veux que chacune ait la taille qu'il faut en fonction de l'espace disponible. Pour cela, on va utiliser ce qu'on appelle fraction (fr)
   

Code:

grid-template-columns: 1fr 1fr 1fr 1fr;
    ou
    grid-template-columns: repeat(4, 1fr);
    ou
    grid-template-columns: 1fr 1fr 2fr; (dans ce cas, ma dernière colonne occupera l'espace de 2 colonnes)

   On va aussi utiliser ça pour qu'une colonne ou ligne s'adapte automatiquement en fonction de la place dispo. Par exemple :
   

Code:

grid-template-columns: 10px 200px 1fr 25px;

   Ici, mes colonnes 1, 2 et 4 auront des largeurs définies et la colonne 3 occupera l'espace disponible
   
   
   Une fois que tu as défini ta grille, tu peux choisir l'espace qu'il y aura entre 2 cases.
   
   Pour gérer les espaces entre les cases sur une même ligne, on va utiliser column-gap et pour gérer les images entre les cases d'une même colonne, on va utiliser row-gap.
   
    Ces propriétés sont à indiquer sur la balise parent.
   
   

Code:


    .d-grid {
        column-gap: 15px;
        display: grid;
        row-gap: 5px;
    }
    

   
   
   Voilà le truc un peu plus chiant ^^ Il y a plusieurs façon de définir la place d'un élement sur la grille :
   -> soit tu ne précises rien et les éléments se mettront les uns à la suite des autres ;
   -> soit tu définis un début et une fin à ton élement.
   
   
   Quand on utilise la mise en page en grille, il faut bien comprendre comment "compter" les lignes et les colonnes.
   
   Image provenant du site W3schools
   
   Imaginons que je veuille avoir un bloc qui occupe les deux premières cases de la première ligne. Cela veut donc dire que mon bloc commence à la Line 1 et va jusqu'à la Line 3 au niveau des colonnes. Je vais donc lui écrire cette CSS
   

Code:

grid-column-start: 1;
    grid-column-end: 3;
    
    ou
    
    grid-column : 1 / 3;

   
   Si c'était sur les lignes, j'aurai écrit :
   

Code:

grid-row-start: 1;
    grid-row-end: 3;
    
    ou
    
    grid-row : 1 / 3;

   
   

---

   
   Je pense avoir fait le tour de ce qu'il y a à retenir / ce qu'on utilise le plus souvent sur le display:grid. Comme pour le flex, il existe un petit jeu pour pratiquer et comprendre le fonctionnement des grids. Il est juste ici : CSS Grid Garden. Bon jardinage :p
   
    Si tu as la moindre question ou si tu n'as pas compris quelque chose, ne sois pas timide. Signale-le à la suite de ce message.