CSS Grid Magazine 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.

.magazine {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 20px;
  grid-template-areas:
    "lead"
    "story-a"
    "story-b"
    "quote";
}

.magazine > .lead { grid-area: lead; }
.magazine > .story-a { grid-area: story-a; }
.magazine > .story-b { grid-area: story-b; }
.magazine > .quote { grid-area: quote; }

@media (min-width: 900px) {
  .magazine {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
    grid-template-areas:
      "lead"
      "quote";
  }
}