⬅ Retour au menu

Organiser les éléments sur la page (Flexbox & Grid)

1. Introduction : organiser des blocs sur une page

Pour organiser les éléments sur une page (mettre des blocs côte à côte, faire des colonnes, centrer du contenu…), on utilise surtout deux outils CSS :

  • Flexbox : idéal pour aligner une rangée ou une colonne d’éléments
  • Grid : idéal pour faire une grille (tableau) de lignes + colonnes

Dans les deux cas, on transforme un bloc “parent” en conteneur d’organisation, puis on y place des “enfants” qu’on va aligner. 

<div class="conteneur">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

Ensuite, on choisit en CSS comment on organise ces éléments (en ligne, en grille, espacés, centrés…).

Avec Flexbox (en ligne)

.conteneur {
    display: flex;
    gap: 10px;
}

Avec Grid (en 3 colonnes)

.conteneur {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

2. Créer un conteneur et ses enfants (la boîte à chaussures)

Pour que Flexbox ou Grid fonctionne, on a besoin de deux choses :

  • un conteneur (le parent) : la “boîte” qui contient les éléments,
  • des enfants : les éléments à organiser à l’intérieur (images, blocs, etc.).

📦 La balise <div> = une boîte

On utilise très souvent la balise <div> pour créer un conteneur. C’est comme une boîte vide dans laquelle on va ranger des éléments. 

<div class="boite-images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</div>

Ici :

  • <div class="boite-images"> : c’est le conteneur (le parent),
  • les 3 balises <img> : ce sont les enfants à organiser.

👟 L’analogie de la boîte à chaussures

Imagine que tu mets 3 photos dans une boîte à chaussures. Tu vas indiquer sur la boite comment les photos sont placées dedans, tu ne vas pas l'indiquer sur chaque photo.

En CSS, c’est pareil : c’est sur la boîte (le conteneur) qu’on applique les propriétés display: flex;, display: grid;, gap, etc.

🧪 Exemple : 3 images organisées avec Flexbox

HTML :

<div class="boite-images">
    <img src="https://via.placeholder.com/60" alt="Image 1">
    <img src="https://via.placeholder.com/60" alt="Image 2">
    <img src="https://via.placeholder.com/60" alt="Image 3">
</div>

CSS :

.boite-images {
    display: flex;    /* on active Flexbox sur le conteneur */
    gap: 10px;        /* espace entre les images */
}

👉 On ne met pas display: flex; sur les images directement, mais sur la <div> qui les contient.

Image 1 Image 2 Image 3

Ici, la “boîte” (le parent) aligne les 3 images (les enfants) en ligne.

🧩 À retenir absolument

  • On crée un conteneur (souvent une <div>).
  • On met dedans les éléments à organiser (images, blocs, etc.).
  • On applique Flexbox ou Grid sur le conteneur, pas sur chaque enfant.
  • Les propriétés comme display: flex;, display: grid;, gap s’écrivent dans le CSS du conteneur.

2. Propriétés communes (display, gap…)

Flexbox et Grid partagent des propriétés communes pour organiser les blocs. Voici les plus importantes :

Mot clé Écriture CSS Rôle Exemple
Activer Flexbox display: flex; Transforme un conteneur en boîte Flexbox.
Les enfants sont alignés selon un axe (ligne ou colonne).
1
2
3
Activer Grid display: grid; Transforme un conteneur en grille (lignes + colonnes).
On définit ensuite le nombre de colonnes/lignes.
1
2
3
Espace entre les éléments gap: 10px; Ajoute un espace entre les éléments, sans marges.
Fonctionne avec display: flex; et display: grid;.
1
2
3

3. Flexbox : aligner en ligne ou en colonne

Flexbox est très pratique pour aligner des éléments sur un axe principal (en ligne ou en colonne), puis les centrer ou les répartir.

Mot clé Écriture CSS Rôle Exemple
Direction flex-direction: row;
flex-direction: column; 		Choisit la direction des éléments :
row = en ligne (gauche → droite)
column = en colonne (haut → bas)

row (en ligne)

1
2
3

column (en colonne)

1
2
3
Alignement sur l’axe principal justify-content: center;
justify-content: space-between; 		Place les éléments le long de l’axe principal (horizontal si row).
center : au centre
space-between : espaces égaux entre les éléments

center

1
2
3

space-between

1
2
3
Alignement sur l’autre axe align-items: center; Aligne les éléments sur l’axe secondaire (vertical si row).
center : centre verticalement.
1
2
3

4. Flexbox : retour à la ligne et flex-grow

Mot clé Écriture CSS Rôle Exemple
Retour à la ligne flex-wrap: wrap; Autorise les éléments à passer à la ligne suivante
si la place manque.
1
2
3
4
5
6

Réduis la largeur de la fenêtre pour voir l’effet.
Faire grandir un élément flex-grow: 1; Indique qu’un élément peut prendre plus de place
que les autres sur l’axe principal.
1
2 (grow)
3

5. Grid : créer une grille de colonnes

Avec Grid, on commence souvent par définir combien de colonnes on veut.

Mot clé Écriture CSS Rôle Exemple
Colonnes de la grille grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr); 		Définit le nombre et la taille des colonnes.
fr = fraction de l’espace disponible.
repeat(3, 1fr) = 3 colonnes de même taille.
1
2
3
4
5
6
Colonnes mixtes grid-template-columns: 200px 1fr; Première colonne fixe (200px), deuxième colonne qui prend le reste de la place.
Menu
Contenu

6. Grid : placer et aligner les éléments

Grid permet aussi d’aligner les éléments à l’intérieur des cellules.

Mot clé Écriture CSS Rôle Exemple
Alignement dans les cellules justify-items: center;
align-items: center; 		justify-items : aligne horizontalement dans la cellule.
align-items : aligne verticalement dans la cellule.
1
2
3
Placer un élément
(bonus simple)		 grid-column: 1 / 3;
grid-row: 1 / 3; 		Permet à un élément d’occuper plusieurs colonnes ou lignes.
Ici, de la colonne 1 à 3 (sans inclure 3).
Large
A
B
C

7. Tableau récapitulatif Flexbox / Grid

Situation Flexbox Grid
Aligner des éléments en ligne ou en colonne 👍 Très adapté (menus, barres, blocs en rangée) Possible mais moins naturel
Créer une grille de cartes (plusieurs lignes + colonnes) Possible, mais un peu limité 👍 Idéal (galerie d’images, cards…)
Centrer un bloc dans une page Très simple avec Flexbox Possible
Maquette complexe (gabarit de page entier) Peut devenir compliqué 👍 Très pratique pour grandes mises en page

À retenir : Flexbox = aligner des éléments sur un axe (ligne/colonne). Grid = organiser la page en grille (lignes + colonnes).