Comment créer une grille CSS responsive avec CSS Grid ?

La syntaxe de base de CSS Grid

CSS Grid permet de construire une mise en page en deux dimensions, avec des lignes et des colonnes. Pour activer une grille, appliquez display: grid à un conteneur. Ses enfants directs deviennent alors des éléments de grille.

.grille {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

Dans cet exemple, la grille comporte trois colonnes de largeur égale. La propriété gap ajoute un espacement régulier entre les lignes et les colonnes.

Les principales propriétés

• grid-template-columns : définit les colonnes de la grille ;
• grid-template-rows : définit les lignes ;
• gap : règle l’espace entre les éléments ;
• grid-auto-rows : contrôle la hauteur des lignes générées automatiquement ;
• grid-column et grid-row : positionnent ou étendent un élément.

Créer une grille de trois colonnes

La fonction repeat() évite de répéter manuellement la même valeur pour chaque colonne.

<div class="grille">
  <article>Carte 1</article>
  <article>Carte 2</article>
  <article>Carte 3</article>
  <article>Carte 4</article>
  <article>Carte 5</article>
  <article>Carte 6</article>
</div>

.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grille article {
  padding: 1.5rem;
  background: #e8f0fe;
  border: 1px solid #b7c9e2;
}

repeat(3, 1fr) crée trois colonnes. L’unité fr répartit l’espace disponible entre les pistes de la grille.

Créer une grille CSS responsive sans media query

Pour une grille qui s’adapte automatiquement, utilisez auto-fit avec minmax() :

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  max-width: 70rem;
  margin-inline: auto;
  padding: 1rem;
}

.carte {
  padding: 1rem;
  border: 1px solid #d0d7de;
  border-radius: 0.5rem;
  background: white;
}

Comment fonctionne auto-fit ?

La déclaration repeat(auto-fit, minmax(15rem, 1fr)) demande au navigateur de :

1. créer autant de colonnes que la largeur disponible le permet ;
2. ne jamais réduire une colonne sous 15rem ;
3. étendre les colonnes pour utiliser l’espace restant ;
4. faire passer automatiquement les éléments à la ligne lorsque l’écran rétrécit.

Cette technique convient aux cartes de services, galeries d’images, listes de produits et blocs éditoriaux.

auto-fit ou auto-fill ?

Les deux valeurs créent automatiquement des pistes répétées, mais elles ne gèrent pas les colonnes vides de la même manière.

/* Les pistes vides sont réduites */
.grille {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Les pistes disponibles sont conservées */
.grille {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

auto-fit est généralement le meilleur choix pour une liste de cartes qui doit occuper naturellement toute la largeur. Utilisez auto-fill lorsque vous souhaitez conserver les pistes potentielles, même si certaines ne contiennent pas encore d’élément.

Contrôler la hauteur des lignes

Les lignes s’adaptent normalement à leur contenu. Vous pouvez toutefois leur imposer une hauteur minimale avec grid-auto-rows et minmax().

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-auto-rows: minmax(8rem, auto);
  gap: 1rem;
}

Chaque ligne mesure au moins 8rem, mais peut grandir si son contenu est plus important.

Utiliser des media queries pour contrôler la structure

Les media queries sont utiles lorsque vous souhaitez imposer un nombre précis de colonnes selon la largeur de l’écran.

.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .grille {
    grid-template-columns: repeat(4, 1fr);
  }
}

Cette approche crée une colonne sur petit écran, deux colonnes à partir de 40rem, puis quatre colonnes à partir de 64rem. Elle est pertinente lorsque chaque point de rupture correspond à une décision de design précise.

Étendre un élément sur plusieurs colonnes

La propriété grid-column permet de faire occuper plusieurs colonnes à un élément.

.grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.carte-large {
  grid-column: span 2;
}

La classe .carte-large s’étend ici sur deux colonnes. Vous pouvez aussi définir précisément les lignes de début et de fin :

.carte-large {
  grid-column: 1 / 3;
}

Bonnes pratiques pour une grille responsive

• Commencez par display: grid et définissez clairement les colonnes.
• Utilisez repeat(auto-fit, minmax(...)) pour une grille fluide sans media query.
• Préférez gap aux marges individuelles pour gérer les espacements.
• Ajoutez min-width: 0 aux enfants si un contenu long risque de forcer la largeur de la grille.
• Testez la grille sur petits écrans, avec un zoom important et avec des contenus de longueurs différentes.
• Utilisez grid-auto-flow: dense avec prudence : il peut modifier l’ordre visuel des éléments par rapport à l’ordre du document.

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.grille > * {
  min-width: 0;
}

À retenir

Pour créer rapidement une grille CSS responsive, partez de ce modèle :

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

CSS Grid adaptera automatiquement le nombre de colonnes à l’espace disponible. Ajoutez des media queries uniquement lorsque vous devez imposer une structure différente à certains paliers d’écran.