CSS Grid

Créer des layouts complexes sur deux axes

Section 1

Créer une grille

Step 1

Définir colonnes et lignes

grid-template-columns et grid-template-rows définissent la structure de la grille. L'unité fr (fraction) divise l'espace disponible proportionnellement.

snippet.css

css

1.grid {
2  display: grid;
3
4  /* 3 colonnes égales */
5  grid-template-columns: 1fr 1fr 1fr;
6
7  /* Équivalent avec repeat() */
8  grid-template-columns: repeat(3, 1fr);
9
10  /* Colonnes mixtes */
11  grid-template-columns: 200px 1fr 200px;
12
13  /* Auto-fill : autant de colonnes que possible */
14  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
15
16  gap: 1rem;
17}

Step 2

Placement des items

Les items peuvent être placés précisément sur la grille avec grid-column et grid-row.

snippet.css

css

1.grid {
2  display: grid;
3
4  /* 3 colonnes égales */
5  grid-template-columns: 1fr 1fr 1fr;
6
7  /* Équivalent avec repeat() */
8  grid-template-columns: repeat(3, 1fr);
9
10  /* Colonnes mixtes */
11  grid-template-columns: 200px 1fr 200px;
12
13  /* Auto-fill : autant de colonnes que possible */
14  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
15
16  gap: 1rem;
17}

Section 2

Grid Areas — Layouts expressifs

Step 3

Nommer les zones

grid-template-areas permet de définir le layout avec une représentation visuelle ASCII. Très lisible et maintenable.

snippet.css

css

1.grid {
2  display: grid;
3
4  /* 3 colonnes égales */
5  grid-template-columns: 1fr 1fr 1fr;
6
7  /* Équivalent avec repeat() */
8  grid-template-columns: repeat(3, 1fr);
9
10  /* Colonnes mixtes */
11  grid-template-columns: 200px 1fr 200px;
12
13  /* Auto-fill : autant de colonnes que possible */
14  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
15
16  gap: 1rem;
17}

Topics and skills covered

CSS Grid
Mise en page 2D
Areas

Flexbox — Mise en page monodimensionnelle

Ch.2