CSS Grid : créer une grille et une mise en page complète

Galerie responsive

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

Mise en page

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "entete entete"
    "menu   contenu"
    "pied   pied";
}
header { grid-area: entete; } nav { grid-area: menu; }
main { grid-area: contenu; }  footer { grid-area: pied; }

@media (max-width: 700px) {
  .page { grid-template-columns: 1fr; grid-template-areas: "entete" "contenu" "menu" "pied"; }
}

Placement manuel : grid-column: 1 / 3, grid-row: span 2. Outils : inspecteur Grid de Firefox/Chrome. Voir aussi Flexbox, responsive.