CSS Grid — tutoriel mise en page responsive

Apprenez CSS Grid : grid-template-columns, unités fr, grid-template-areas et grilles responsive sans media queries compliquées.

CSS Grid for Page Layouts

CSS Grid gère les mises en page bidimensionnelles — structures de page complètes, tableaux de bord et galeries photo. C’est le remplaçant moderne des layouts float et positionnement complexes.

Why CSS Grid Matters

Grid handles two-dimensional layouts that Flexbox cannot — dashboards, galleries, and full-page templates are faster with Grid.

auto-fit and minmax() create responsive columns without a single media query — a pattern every responsive site should use.

CSS Grid — Key Ideas You Must Know

grid-template-columns: repeat(3, 1fr)
gap pour l’espacement lignes/colonnes
grid-template-areas pour des layouts nommés
minmax() pour des colonnes adaptatives
grid-column et grid-row pour fusionner des cellules

CSS Grid Code Example

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Practice CSS Grid with Free Lessons

Créez une grille de cartes responsive avec le tutoriel CSS sur Sturdee.

Tip: Free interactive lesson: /tutorials/css/css_layout — practice CSS Grid with runnable code on Sturdee.

Tutoriel CSS Grid — FAQ

Frequently Asked Questions

Puis-je combiner Grid et Flexbox ?+

Oui. Grid pour la page ; Flexbox à l’intérieur des cellules pour les détails des composants.

Tutoriel CSS Grid — modèles, gaps et zones