Break the grid

Asymmetry, overlap and diagonal flow beat centered equal columns.

From frontend-design, Spatial Composition: asymmetry, overlap, diagonal flow.

Four moves, one section

Toggle each move and watch the layout reflow.

Composition moves
Centered, equal0 of 4

Field notes · 04

Glaze that remembers the kiln

Each piece is fired once, slowly, and cooled overnight in the kiln it was made in.

  • 1,240°peak
  • 14 hcool-down
  • 1firing
grid-template-columns: 1fr 1fr 1fr

Drag composer

Drag or arrow-key the blocks across twelve columns.

12 columns, 2 elementsCentered
.hero        { display: grid; grid-template-columns: repeat(12, 1fr); }
.hero-image  { grid-column: 1 / 8;  grid-row: 1; }
.hero-title  { grid-column: 6 / 13; grid-row: 1; align-self: end;
               margin-bottom: -2rem; z-index: 1; }

Overlap that still reads

Raise the overlap, then narrow the container.

Fixed overlapBad
Studio hours

Open Thursday to Sunday, 10 to 6. Kiln days are closed.

.media { z-index: 2 }no collapse rule
Text on top, stacksGood
Studio hours

Open Thursday to Sunday, 10 to 6. Kiln days are closed.

.text { z-index: 1; background }@container (max-width: 250px)
.feature { container-type: inline-size; }
.feature-grid { display: grid; grid-template-columns: 7fr 5fr; align-items: center; }
.feature-media { grid-column: 1; grid-row: 1; }
.feature-text {
  grid-column: 2; grid-row: 1;
  margin-left: -48px;
  position: relative; z-index: 1;
  background: var(--card);
}
@container (max-width: 250px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-text { grid-column: 1; grid-row: 2; margin: -16px 12px 0; }
}

Why it matters, pros and cons

Why it matters

Equal centered blocks carry equal weight, so nothing leads.

Pros

  • Hierarchy from placement alone.
  • Reads as designed, not templated.
  • Plain CSS grid, no extra markup.

Cons

  • Dense product UI needs predictability, not a tour.
  • Every overlap needs a ground and a collapse rule.
  • Visual order must still match source order.