CSS Grid Photo Gallery Generator

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 8px;
  grid-template-areas:
    "feature feature"
    "shot-a  shot-b"
    "shot-c  shot-d";
}

.gallery > .feature { grid-area: feature; }
.gallery > .shot-a { grid-area: shot-a; }
.gallery > .shot-b { grid-area: shot-b; }
.gallery > .shot-c { grid-area: shot-c; }
.gallery > .shot-d { grid-area: shot-d; }

@media (min-width: 800px) {
  .gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 180px 180px;
    gap: 12px;
    grid-template-areas:
      "feature feature shot-a shot-b"
      "feature feature shot-c shot-d";
  }
}