Un catalogue parfaitement aligné

Chaque <li> est un élément de la grille .cartes ; on lui fait occuper cinq rangées et on fait de lui une sous-grille. La carte, son unique enfant, fait de même ; ses cinq enfants s'alignent alors sur les rangées de la grille des cartes.

.cartes > li {
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.carte {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}

Les <li> sont déjà des grilles (display: grid dans style.css) ; la carte, elle, était une boîte flexible et devient une grille. Le row-gap: 0 supprime la gouttière de 1.5rem entre les rangées d'une même carte. Dans Chromium (page code/ch8/exercices/subgrid-catalogue.html, à 900 pixels), les trois auteurs de la première rangée sont à la même ordonnée, 340,48 pixels, au lieu de 427,38, 448,48 et 427,38 sans sous-grille ; il en va de même des titres, des rayons et des prix.