7. Aligner les cartes dans leurs cellules

Aligne le contenu en haut tout en étirant chaque carte sur la largeur de sa piste.

Objectifs de la leçon

  • Aligne le contenu en haut tout en étirant chaque carte sur la largeur de sa piste.
  • Appliquer place-items à la galerie exacte.
  • Conserver toutes les décisions CSS 00 à CSS 03.

Pistes et cellules

Une piste est une ligne ou une colonne ; une cellule est leur intersection.

Commence par la structure avant de régler l'alignement interne.

Taille intrinsèque

Compare une largeur fixe avec auto-fit et minmax sans raccourcir les titres.

À 375 px, une piste doit tenir sans masquer ni tronquer le contenu.

Ordre robuste

Conserve l'ordre du DOM pour la lecture et le clavier.

N'utilise pas dense pour combler un trou si cela déplace une carte avant une précédente.

Vocabulaire lié

  • place-items — Propriété travaillée avec la valeur start stretch.
  • piste — Ligne ou colonne qui structure la grille.
  • cellule — Intersection d'une ligne et d'une colonne.

Validation

  • Je distingue piste et cellule.
  • Je conserve les règles cumulatives.
  • Je vérifie largeur, contenu et ordre source.

Ouvrir la leçon interactive