CSS Grid : layouts avancÃ©s et prÃ©cis

Introduction

CSS Grid est un système de layout bidimensionnel (lignes ET colonnes) qui permet de créer des mises en page complexes et précises. Là où Flexbox fonctionne en une dimension, Grid fonctionne en deux.

Quand utiliser Grid ? Layouts complexes avec colonnes ET lignes, dashboards, designs éditoriaux, galeries précises.

Grid fonctionne aussi avec un conteneur parent et des enfants. Le conteneur définit la grille, les enfants s'y placent.

Display: grid — Activer CSS Grid

Pour utiliser CSS Grid, appliquez display: grid au conteneur parent :

.container {
    display: grid;
}

Seul, cela ne fait rien de visible. Vous devez définir les colonnes et lignes :

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

Différence Flexbox vs Grid :

Flexbox : 1D (une seule direction)
Grid : 2D (lignes ET colonnes)

Grid-template-columns — Définir les colonnes

Contrôle le nombre et la taille des colonnes :

Largeurs fixes

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}
/* 3 colonnes de 200px chacune */

Unité fr (fraction) — Divise l'espace restant

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
/* 3 colonnes égales */

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}
/* 1ère : 1/4, 2ème : 2/4, 3ème : 1/4 */

Mélanger largeurs fixes et flexibles

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
}
/* Sidebar gauche (200px) + contenu (flexible) + sidebar droit (200px) */

auto-fit et auto-fill — Responsive automatique

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Autant de colonnes que possible avec min 300px */

repeat() — Répéter un pattern

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
/* 12 colonnes égales (style Bootstrap) */

Grid-template-rows — Définir les lignes

Fonctionne exactement comme les colonnes, mais pour les lignes :

.container {
    display: grid;
    grid-template-rows: 100px 200px 150px;
}
/* 3 lignes : 100px, 200px, 150px */

Hauteurs avec fr

.container {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr auto;
}
/* Header (auto), contenu (flexible), footer (auto) */

Layout classique (header, contenu, footer)

.layout {
    display: grid;
    height: 100vh;
    grid-template-rows: 80px 1fr 100px;
    grid-template-columns: 250px 1fr;
}

/* Header occupe toute la largeur */
.header {
    grid-column: 1 / -1;
}

/* Sidebar et contenu */
.sidebar { grid-column: 1; }
.main { grid-column: 2; }

/* Footer occupe toute la largeur */
.footer {
    grid-column: 1 / -1;
}

Grid-gap — Espacement entre cellules

Ajoute automatiquement de l'espace entre les colonnes et lignes :

gap — Espace identique partout

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
/* 20px de vide entre les colonnes ET les lignes */

column-gap et row-gap — Espaces différents

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 10px;
}
/* 30px entre colonnes, 10px entre lignes */

Avantage : Pas besoin de margins compliquées. Grid gère l'espacement automatiquement.

Placements précis — grid-column et grid-row

Placez les éléments exactement où vous voulez dans la grille :

grid-column — Numéro de colonne de départ et fin

.item1 {
    grid-column: 1 / 3;
}
/* Commence colonne 1, finit colonne 3 (occupe 2 colonnes) */

.item2 {
    grid-column: 3 / 4;
}
/* Colonne 3 seulement */

grid-row — Numéro de ligne de départ et fin

.item1 {
    grid-row: 1 / 3;
}
/* Occupe 2 lignes */

Combiner colonne ET ligne

.header {
    grid-column: 1 / -1;  /* Toute la largeur */
    grid-row: 1;
}

.sidebar {
    grid-column: 1;
    grid-row: 2 / 4;  /* Occupe 2 lignes */
}

.main {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
}

span — Occuper N colonnes/lignes

.item {
    grid-column: span 2;  /* Occupe 2 colonnes */
}

.hero {
    grid-column: span 3;
    grid-row: span 2;  /* Occupe 3 colonnes ET 2 lignes */
}

Grid-auto-flow — Flux automatique

Contrôle comment les éléments se remplissent automatiquement :

row — Remplit ligne par ligne (défaut)

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
}
/* Les éléments se placent ligne par ligne */

column — Remplit colonne par colonne

.container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
}
/* Les éléments se placent colonne par colonne */

dense — Remplit les trous

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
}
/* Remplit les trous créés par les éléments plus grands */

Exemples pratiques complets

Exemple 1 : Layout classique (header, sidebar, contenu, footer)

<div class="layout">
    <header>Logo | Menu</header>
    <aside>Sidebar</aside>
    <main>Contenu principal</main>
    <footer>Copyright</footer>
</div>

<style>
.layout {
    display: grid;
    height: 100vh;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px 1fr 100px;
    gap: 20px;
}

header {
    grid-column: 1 / -1;
    background: #333;
    color: white;
    padding: 20px;
}

aside {
    background: #f5f5f5;
    padding: 20px;
    grid-row: 2;
}

main {
    padding: 20px;
    grid-row: 2;
    grid-column: 2;
}

footer {
    grid-column: 1 / -1;
    background: #333;
    color: white;
    padding: 20px;
}
</style>

Exemple 2 : Galerie avec éléments de différentes tailles

<div class="gallery">
    <img src="image1.jpg" alt="" class="large">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
    <img src="image5.jpg" alt="">
</div>

<style>
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.gallery .large {
    grid-column: span 2;
    grid-row: span 2;
}
</style>

Exemple 3 : Dashboard avec widgetaires (4 colonnes responsives)

<div class="dashboard">
    <div class="widget">Widget 1</div>
    <div class="widget">Widget 2</div>
    <div class="widget large">Widget Grand</div>
    <div class="widget">Widget 4</div>
</div>

<style>
.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.widget {
    background: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    min-height: 200px;
}

.widget.large {
    grid-column: span 2;
    min-height: 400px;
}
</style>