Working drawings for a page that adapts.

A specification for how one layout resolves into four, plotted against the width of the screen.

01 — Select scale Choose a plotting size

02 — Fine adjust · drag to any width Now plotting at 1200px

5202-col

8203-col

10804-col

▲

Plate — layout D / 1080+ Section A-A · 1200 px

FIG. 01 Lede — the page's opening thesis

A grid is a contract between content and screen.

The layout doesn't fight the width; it negotiates. Each region has a role, and the map that assigns roles to columns is the only thing that changes.

FIG. 02 Column count by width

FIG. 04 The mechanism, in four steps

Base rule sets a single-column stack.
At 520 px, six tracks and named areas take over.
At 820 px, the map widens to eight.
At 1080 px, twelve — full editorial layout.

PLATE 06 Reserved area · imagery

FIG. 08 Detail — column allocation

lede 7 col

quote 5 col

chart · note · image 4 + 5 + 3 col

list · meta · detail 6 + 2 + 4 col

03 — Specification / D ≥ 1080

/* Sheet A · base — single column */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Sheet B · six-column mapping */
@media (min-width: 520px) {
  .layout {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "lede  lede  lede  lede  lede  lede"
      "chart chart chart note  note  note"
      "list  list  list  list  quote quote"
      "img   img   img   img   meta  meta"
      "detail detail detail detail detail detail";
  }
}

/* Sheet C · eight-column mapping */
@media (min-width: 820px) {
  .layout {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      "lede  lede  lede  lede  lede  note  note  note"
      "chart chart chart quote quote quote quote quote"
      "list  list  list  img   img   img   meta  meta"
      "detail detail detail detail detail detail detail detail";
  }
}

/* Sheet D · twelve-column editorial */
@media (min-width: 1080px) {
  .layout {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "lede  lede  lede  lede  lede  lede  lede  quote quote quote quote quote"
      "chart chart chart chart note note note note note img   img   img"
      "list  list  list  list  list  list  meta  meta  detail detail detail detail";
  }
}