Mise en page avec Grid
11 min · Intermédiaire · 7 août 2026
Activer Grid et définir des colonnes
css
.conteneur {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* trois colonnes de largeur egale */
gap: 16px; /* espace entre les cellules */
}L’unité fr (fraction) répartit l’espace disponible : 1fr 1fr 1fr crée trois colonnes égales, 1fr 2fr créerait deux colonnes où la seconde prend deux fois plus de place.
Astuce
repeat(3, 1fr) produit exactement le même résultat que 1fr 1fr 1fr, en plus lisible dès que le nombre de colonnes grandit.
Flexbox ou Grid : une question de dimensions
text
Flexbox : une seule dimension (une ligne OU une colonne) -> barre de navigation, liste d'elements
Grid : deux dimensions a la fois (lignes ET colonnes) -> mise en page de page entiereÀ toi de jouer
Rends .conteneur en grille avec exactement 3 colonnes.
html
<!-- HTML -->
<div class="conteneur">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
/* CSS */
.conteneur {
/* Complete le style ici */
}