CSS Grid

Le layout 2D pour des interfaces modernes

8h30 — 10h00

L'étudiant doit savoir

1. Créer un layout complet

Avec grid-template-areas

2. Grille responsive

repeat(auto-fill, minmax())

3. Étendre les éléments

span sur plusieurs colonnes/lignes

4. Combiner Grid et Flexbox

Layout + alignement interne

Plan du cours

1. Rappel Flexbox vs Grid

1D vs 2D — quand utiliser l'un ou l'autre

2. Grid fondamental

grid-template-columns, rows, gap

3. Le trio magique

fr, repeat(), minmax()

4. Named Grid Areas

Dessiner un layout visuellement

5. Live Coding : Dashboard

Header, sidebar, main, footer en Grid

Module 1

Flexbox (1D) vs Grid (2D)

Comprendre quand utiliser l'un ou l'autre

La question fondamentale

"Ai-je besoin de contrôler

les lignes ET les colonnes ?"

NON

Une seule direction

→ Flexbox suffit

OUI

Lignes ET colonnes

→ CSS Grid

Flexbox = 1 Dimension

Une seule direction : ligne OU colonne

justify-content, align-items

1

2

3

Parfait pour :

• • Navigation horizontale
• • Centrer un élément
• • Boutons côte à côte
• • Répartir l'espace

Pas idéal pour :

• • Grille de cards
• • Layout complet de page
• • Tableau de bord

Grid = 2 Dimensions

Lignes ET colonnes simultanément

grid-template-columns, grid-template-rows

1

2

3

4

5

6

Parfait pour :

• • Grille de cards responsive
• • Layout de page complet
• • Dashboard (header/sidebar/main)
• • Galerie photo

Avantage clé :

• • Contrôle précis des deux axes
• • Placement explicite possible
• • Zones nommées possible

Grid et Flexbox : complémentaires !

GRID

Structure

+

FLEXBOX

Contenu

Grid pour le layout global

Flexbox pour l'alignement interne

Module 2

Grid fondamental

Les propriétés de base pour créer une grille

Les 3 propriétés de base

grid-template-columns

Nombre et taille des colonnes

200px 200px 200px

grid-template-rows

Nombre et taille des lignes

100px auto 100px

gap

Espacement entre cellules

20px ou 1rem

Exemple : Grille 3x2

1

2

3

4

5

6

.container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 100px 100px;

gap: 1rem;

}

gap-row et gap-column

Contrôler séparément l'espacement horizontal et vertical

.container {

display: grid;

grid-template-columns: 1fr 1fr;

grid-template-rows: 80px 80px;

row-gap: 20px;

column-gap: 10px;

}

1

2

3

4

↑ row-gap: 20px, column-gap: 10px

Module 3

Le trio magique

fr + repeat() + minmax()

L'unité fr (fraction)

Une part de l'espace disponible

1fr

1fr

1fr

1fr

2fr

1fr

1fr

1fr

grid-template-columns: 1fr 1fr 1fr;

3 colonnes égales

grid-template-columns: 2fr 1fr 1fr;

Colonne 1 = 2x les autres

Attention : N'écrivez pas "1" mais "1fr" !

repeat() - Éviter la répétition

Sans repeat() (fastidieux)

grid-template-columns:

1fr 1fr 1fr 1fr 1fr

1fr 1fr 1fr 1fr 1fr;

Avec repeat() (clever)

grid-template-columns:

repeat(10, 1fr);

Démo : 6 colonnes

1

2

3

4

5

6

minmax() - Taille min et max

Définir les bornes d'une cellule

grid-template-columns: minmax(100px, 200px) 1fr 1fr;

minmax(100px, 200px)

Entre 100px et 200px

minmax(0, 1fr)

Min 0, max illimité

minmax(auto, auto)

Selon le contenu

LE pattern responsive à retenir

repeat(auto-fill, minmax(300px, 1fr))

"Crée autant de colonnes que possible, mais pas plus étroites que 300px"

Démo : Grille responsive

.cards {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

gap: 1rem;

}

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Redimensionnez la fenêtre pour voir les colonnes s'adapter

Module 4

Named Grid Areas

Dessiner un layout visuellement dans le CSS

Le concept

Donner un nom à chaque zone du layout

header

header

header

sidebar

main

main

sidebar

footer

footer

.container {

display: grid;

grid-template-areas:

"header header header"

"sidebar main main"

"sidebar footer footer";

}

La syntaxe étape par étape

Règles importantes :

• • Chaque ligne doit avoir le même nombre de zones
• • Les guillemets sont obligatoires
• • Utilisez un point "." pour une zone vide

.container {

grid-template-areas:

"header header header"

"nav main aside"

". footer footer";

}

/* La zone ". " est vide */

Assigner les zones aux éléments

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Puis dans le HTML :

<div class="container">
  <header class="header">...</header>
  <aside class="sidebar">...</aside>
  <main class="main">...</main>
  <footer class="footer">...</footer>
</div>

Pourquoi les named areas sont un game-changer

LISIBLE

On "dessine" le layout, on le visualise directement dans le CSS

FLEXIBLE

Changer le layout = changer les guillemets, pas le HTML

SÉMANTIQUE

Le code reflète clairement la structure de la page

MAINTAINABLE

Plus facile à comprendre et modifier pour les autres

Module 5

Live Coding : Dashboard

Header + Sidebar + Main + Footer

Le résultat attendu

Header

Sidebar

Main Content

Footer

Code complet du dashboard

.dashboard {

display: grid;

grid-template-columns: 250px 1fr;

grid-template-rows: 60px 1fr 50px;

grid-template-areas:

"header header"

"sidebar main"

"footer footer";

}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Rendre responsive avec media queries

@media (max-width: 768px) {

.dashboard {

grid-template-columns: 1fr;

grid-template-rows: 60px auto 1fr auto 50px;

grid-template-areas:

"header"

"sidebar"

"main"

"footer";

}

}

Combiner Grid et Flexbox

Grid pour le layout, Flexbox pour l'alignement interne

CSS (Grid + Flexbox)

.card {

display: grid;

place-content: start;

}

.card-content {

display: flex;

align-items: center;

}

Résultat :

Image

Titre + Description

Bouton

Piège #1 : template vs placement

✗ ERREUR

grid-column: 1fr 1fr;

grid-column, c'est pour PLACER un élément, pas pour définir la grille

✓ CORRECT

grid-template-columns: 1fr 1fr;

grid-template-*, c'est pour DÉFINIR la grille

Piège #2 : Oublier l'unité fr

✗ ERREUR

grid-template-columns: 1 1 1;

"1" = 1px fixe !

✓ CORRECT

grid-template-columns: 1fr 1fr 1fr;

"fr" = fraction flexible

Piège #3 : Syntaxe des named areas

✗ ERREURS

grid-template-areas:

header header header

sidebar main main

Manque les guillemets!

✓ CORRECT

grid-template-areas:

"header header header"

"sidebar main main";

Guillemets + même nb de colonnes

Points clés à retenir

Grid = 2D

Lignes ET colonnes

Flexbox = 1D

Ligne OU colonne

Pattern responsive

repeat(auto-fill, minmax(300px, 1fr))

Game-changer

Named grid areas

C'est terminé !

Vous savez maintenant créer des layouts avec CSS Grid

Questions ?