Grid et responsive

Ce que tu vas apprendre

• Construire une grille en colonnes avec display: grid.
• Adapter la disposition à la largeur de l'écran avec une media query.
• Concevoir d'abord pour le mobile, puis élargir.

Une grille de recettes

Flexbox range des éléments sur un seul axe. CSS Grid gère deux axes à la fois : des lignes et des colonnes. Voici une grille de trois colonnes égales :

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

Chaque enfant direct de .recettes prend une case. Les cartes se rangent de gauche à droite, puis passent à la ligne suivante toutes seules.

L'unité fr (fraction) est propre à la grille : 1fr représente une part de l'espace disponible. Avec trois colonnes de 1fr, chacune prend un tiers. Avec 2fr 1fr, la première colonne est deux fois plus large que la seconde.

Mélanger les largeurs

Tu peux fixer une colonne et laisser l'autre s'adapter :

.page {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2rem;
}

Une barre latérale de 15rem, et un contenu qui occupe tout le reste. Pour la hauteur des lignes, grid-template-rows fonctionne pareil, mais le plus souvent on laisse la hauteur s'adapter au contenu.

Un élément peut occuper plusieurs colonnes :

.recette-vedette {
  grid-column: span 2;
}

Cette carte s'étend sur deux colonnes.

Une grille qui s'adapte seule

Cette déclaration crée autant de colonnes que la place le permet, sans media query :

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

minmax(14rem, 1fr) signifie « au moins 14rem, au plus une part de l'espace ». Sur un grand écran tu as quatre colonnes, sur un petit une seule. Le navigateur fait le calcul.

Le viewport

Un site responsive s'adapte à la taille de l'écran : téléphone, tablette, ordinateur. Pour que ça marche sur mobile, la page HTML doit contenir cette balise dans le <head> :

<meta name="viewport" content="width=device-width, initial-scale=1">

Sans elle, un téléphone affiche la page comme sur un grand écran, en miniature.

Les media queries

Une media query applique des règles seulement quand une condition est vraie, par exemple une largeur d'écran minimale :

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

Les règles entre accolades ne valent que si la fenêtre mesure au moins 48rem (environ 768 px). Utiliser des rem plutôt que des px dans les conditions fait suivre la taille de texte du visiteur.

Le point où la mise en page change s'appelle un point de rupture (breakpoint). Choisis-les quand ton contenu devient mal à l'aise, pas d'après un modèle de téléphone.

Mobile d'abord

La méthode mobile d'abord consiste à écrire le style de base pour le petit écran, puis à ajouter des media queries min-width pour élargir.

/* petit écran : une colonne */
.recettes {
  display: grid;
  gap: 1rem;
}

/* écran moyen : deux colonnes */
@media (min-width: 40rem) {
  .recettes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* grand écran : quatre colonnes */
@media (min-width: 64rem) {
  .recettes {
    grid-template-columns: repeat(4, 1fr);
  }
}

Le style mobile est le plus simple, il sert de socle. Chaque media query ajoute seulement ce qui change. Le code reste court et facile à relire.

Rendre le reste souple

Quelques réflexes complètent la grille :

1. Donne max-width: 100% aux images pour qu'elles ne dépassent jamais leur parent.
2. Préfère rem et % aux px fixes pour les largeurs et les espaces.
3. Évite width fixe sur un conteneur : privilégie max-width.
4. Teste avec un texte plus long que prévu.

img {
  max-width: 100%;
  height: auto;
}

À retenir

• display: grid avec grid-template-columns crée des colonnes ; fr partage l'espace disponible.
• repeat(auto-fit, minmax(14rem, 1fr)) donne une grille qui s'adapte sans media query.
• La balise <meta name="viewport" ...> est indispensable pour un affichage correct sur mobile.
• Une media query @media (min-width: ...) applique des règles à partir d'une largeur.
• Mobile d'abord : style de base pour le petit écran, puis min-width pour élargir.
• Les images responsives s'obtiennent avec max-width: 100%.