CSS Grid Portfolio Layout Generator

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

.portfolio {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 16px;
  grid-template-areas:
    "feature"
    "project-a"
    "project-b"
    "project-c";
}

.portfolio > .feature { grid-area: feature; }
.portfolio > .project-a { grid-area: project-a; }
.portfolio > .project-b { grid-area: project-b; }
.portfolio > .project-c { grid-area: project-c; }

@media (min-width: 860px) {
  .portfolio {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 200px 200px;
    gap: 20px;
    grid-template-areas:
      "feature   feature   project-a"
      "feature   feature   project-b"
      "project-c project-c project-c";
  }
}