CSS 12 Column Grid Generator

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

.grid-12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 16px;
  grid-template-areas:
    "full   full   full   full"
    "half-a half-a half-a half-a"
    "half-b half-b half-b half-b";
}

.grid-12 > .full { grid-area: full; }
.grid-12 > .half-a { grid-area: half-a; }
.grid-12 > .half-b { grid-area: half-b; }

@media (min-width: 900px) {
  .grid-12 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
    grid-template-areas:
      "full   full   full   full   full   full   full   full   full   full   full   full"
      "half-a half-a half-a half-a half-a half-a half-b half-b half-b half-b half-b half-b";
  }
}