Utilisation du grid

Parent properties :

Display:

     
        
        # active le contexte de grille pour tous les enfants directs.
        .container {
            display: grid;
        }
        
    

Grid-template:

     
        
        # définit les lignes et les colonnes de la grille. définir les valeurs de taille de piste et les noms de ligne (facultatif).
        .container {
            grid-template-columns: 10px 30px auto 20% ;
            grid-template-row: repeat(3, 20px);
        }
        
    

Grid-gap:

     
        
        # définit la taille des lignes de la grille, les gouttières entre les colonnes et entre les lignes.
        .container {
            column-gap: 10px;
            row-gap: 20px;
        }
        
    

Justify-items:

     
        
        # définit l'alignement le long de l'axe des lignes.
        .container {
            justify-items: start | center | end | stretch;
        }
        
    

align-items:

     
        
        # définit l'alignement le long de l'axe des colonnes.
        .container {
            align-items: start | center | end | stretch;
        }
        
    

grid-auto-flow:

     
        
        # définit comment placer automatiquement les éléments de la grille qui ne sont pas explicitement placés.
        .container {
            grid-auto-flow: row | column | row dense | column dense;
        }
        
    

Justify-content:

     
        
        # justifie tout le contenu de la grille sur l'axe des lignes si la taille totale de la grille est inférieure à celle du container.
        .container {
            justify-content: start | center | end | stretch | space-between | space-around | space-evenly;
        }
        
    

Align-content:

     
        
        # justifie tout le contenu de la grille sur l'axe des colonnes si la taille totale de la grille est inférieure à celle du container.
        .container {
            align-content: start | center | end | stretch | space-between | space-around | space-evenly;
        }
        
    

Children properties :

Justify-self

     
        
        # aligne un élément à l'intérieur d'une seule cellule le long de l'axe des lignes.
        .container {
            justify-self: start | end | center | stretch;
        }
        
    

Align-self

     
        
        # aligne un élément à l'intérieur d'une seule cellule le long de l'axe de la colonne.
        .container {
            align-self: start | end | center | stretch;
        }
        
    

Grid-column

     
        
        # détermine l'emplacement de l'élément en fonction des lignes de colonne de début et de fin (ou d'une étendue).
        .container {
            grid-column-start: 2;
            grid-column-end: 4;
            // ou bien grid-column: 2 / 4 
        }
        
    

Grid-row

     
        
        # pareil mais pour l'emplacement de la ligne
        .container {
            grid-column-start: 1;
            grid-column-end: 3;
            // ou bien grid-row: 1 /span 2 
        }