CSS Grid Documentation Site 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.

.docs {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  grid-template-areas:
    "header"
    "main";
}

.docs > .header { grid-area: header; }
.docs > .main { grid-area: main; }
.docs > .nav { display: none; }
.docs > .toc { display: none; }

@media (min-width: 768px) {
  .docs {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 28px;
    grid-template-areas:
      "header header"
      "nav    main";
  }

    .docs > .nav { grid-area: nav; }
}

@media (min-width: 1180px) {
  .docs {
    grid-template-columns: 240px minmax(0, 72ch) 200px;
    gap: 32px;
    grid-template-areas:
      "header header header"
      "nav    main   toc";
  }

    .docs > .toc { grid-area: toc; }
}