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

.calendar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto minmax(60px, auto) minmax(60px, auto);
  gap: 2px;
  grid-template-areas:
    "toolbar toolbar toolbar toolbar toolbar toolbar toolbar"
    "mon     tue     wed     thu     fri     sat     sun"
    "w1-1    w1-2    w1-3    w1-4    w1-5    w1-6    w1-7"
    "w2-1    w2-2    w2-3    w2-4    w2-5    w2-6    w2-7";
}

.calendar > .toolbar { grid-area: toolbar; }
.calendar > .mon { grid-area: mon; }
.calendar > .tue { grid-area: tue; }
.calendar > .wed { grid-area: wed; }
.calendar > .thu { grid-area: thu; }
.calendar > .fri { grid-area: fri; }
.calendar > .sat { grid-area: sat; }
.calendar > .sun { grid-area: sun; }
.calendar > .w1-1 { grid-area: w1-1; }
.calendar > .w1-2 { grid-area: w1-2; }
.calendar > .w1-3 { grid-area: w1-3; }
.calendar > .w1-4 { grid-area: w1-4; }
.calendar > .w1-5 { grid-area: w1-5; }
.calendar > .w1-6 { grid-area: w1-6; }
.calendar > .w1-7 { grid-area: w1-7; }
.calendar > .w2-1 { grid-area: w2-1; }
.calendar > .w2-2 { grid-area: w2-2; }
.calendar > .w2-3 { grid-area: w2-3; }
.calendar > .w2-4 { grid-area: w2-4; }
.calendar > .w2-5 { grid-area: w2-5; }
.calendar > .w2-6 { grid-area: w2-6; }
.calendar > .w2-7 { grid-area: w2-7; }

@media (min-width: 900px) {
  .calendar {
    grid-template-rows: auto auto minmax(120px, auto) minmax(120px, auto);
    gap: 4px;
  }
}