Asymmetric editorial grid

A 12-column grid used deliberately off-centre, so that content placement reads as a decision rather than a default.

Grade: ARuntimes: cssStatus: code-only

Documented, no live demo yet — the code below is complete.

Intent

Centred content is the default and therefore invisible. An editorial grid keeps a strict column system but places blocks asymmetrically — a headline starting at column 2 and running to 9, a caption hanging alone in column 11 — so the page has a compositional point of view while still being systematic enough to maintain.

Implementation

The `.bleed` rule uses a negative margin equal to the gutter so full-width media escapes the container without a second wrapper.

Dependencies: none

html-css-js

:root {
  --grid-gap: clamp(1rem, 1.6vw, 2rem);
  --gutter: clamp(1rem, 4vw, 4rem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-inline: var(--gutter);
}

@media (min-width: 48rem) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Named ranges keep call sites readable and refactorable. */
.col-lead { grid-column: 1 / -1; }
.col-body { grid-column: 1 / -1; max-width: 62ch; }
.col-aside { grid-column: 1 / -1; }

@media (min-width: 72rem) {
  .col-lead { grid-column: 2 / 10; }
  .col-body { grid-column: 3 / 9; }
  .col-aside { grid-column: 11 / 13; }
}

/* Escape the gutter without leaving the grid. */
.bleed {
  grid-column: 1 / -1;
  margin-inline: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter) * 2);
}

Use it when

Long-form marketing and case-study pages.
Anywhere you want a print-like composition without hand-placing every element.

Avoid it when

Data-dense dashboards, where symmetry aids scanning.
Pages whose content is user-generated and unpredictable in length.

Accessibility

Keep DOM order equal to reading order. Never use grid placement to reorder content visually in a way that contradicts the source.
Asymmetric placement must not push any text column below the readable measure at small widths.

Performance

CSS Grid only. No JavaScript measurement, no resize listeners.

Knobs

columns: Desktop column count. Default: 12
gutter: Page side padding. Default: clamp(1rem, 4vw, 4rem)

Composition

Pairs with

Conflicts with

None.

Instruction for Claude Code

Create a 12-column CSS Grid layout (4 columns mobile, 6 tablet, 12 desktop) with a fluid gutter. Expose named span utilities — col-lead spanning 2/10, col-body spanning 3/9 with a 62ch cap, col-aside spanning 11/13 — that collapse to full width below the desktop breakpoint. Add a .bleed utility using negative inline margins equal to the gutter. Keep DOM order identical to reading order.