UAA 6    CSS
☰

Display Grid

1. Activer Grid

Pour transformer un conteneur en grille :


.container {
    display: grid;
}

2. Définir les colonnes et lignes

On utilise grid-template-columns et grid-template-rows :


.container {
    display: grid;
    grid-template-columns: 200px 1fr 2fr;
    grid-template-rows: 100px auto;
}

3. Unités utiles

4. Espacement entre les éléments

On utilise gap :


.container {
    gap: 20px;
}

5. Positionnement simple des éléments

Chaque élément peut être placé avec :


.item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

6. Positionnement nommé (grid-template-areas)

On peut nommer les zones pour un layout plus lisible :


.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
        "header header header"
        "sidebar content menu"
        "footer footer footer";
}

header { grid-area: header; }
nav { grid-area: menu; }
main { grid-area: content; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }

7. Répétition automatique

Pour créer des grilles dynamiques :


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

Ou responsive :


.container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

8. Alignement dans la grille

Aligner les éléments dans la grille :


.container {
    justify-items: center;   /* horizontal */
    align-items: center;     /* vertical */
}

Aligner la grille elle-même :


.container {
    justify-content: space-between;
    align-content: center;
}

9. Exemple complet


.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    grid-template-areas:
        "header header header"
        "sidebar content menu";
}

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: content; }
nav { grid-area: menu; }

10. Résumé