Vary emphasis, break the box

Feature one item, quiet the rest, and let images bleed past the box.

From refactoring-ui, section 7, Layout & Composition.

Feature one, minimize the rest

Click any post to feature it.

Every post equalBad
grid-template-columns: repeat(3, 1fr)
One featuredGood
featured: span 2 · rest: repeat(2, 1fr)

Bleed the image to the edge

Drag the height, then try each object-fit.

Inset imageBad
Travel

A week in the Dolomites

Five huts, three passes, one bad forecast.

padding: 16px; img { border-radius: 8px }
Full-bleed imageGood
Travel

A week in the Dolomites

Five huts, three passes, one bad forecast.

overflow: hidden; img { object-fit: cover }

Let the avatar break the edge

Drag the overlap, then toggle the ring.

Avatar inside the cardBad

Maya Rossi

Staff photographer

Mountains, weather, and the people who live under both.

148 posts12.4k followers
padding: 16px
Avatar overlaps coverGood

Maya Rossi

Staff photographer

Mountains, weather, and the people who live under both.

148 posts12.4k followers
margin-top: -36px; box-shadow: 0 0 0 4px var(--card)

Why it matters, pros and cons

Why it matters

Size is the loudest ranking signal. Equal cards make the reader do the ranking.

Pros

  • The reader knows where to start.
  • Minimized items fit more on screen.
  • Bleeding images gain the padding's width.

Cons

  • Feature with a reason, or the emphasis lies.
  • Peer items people compare want a uniform grid.
  • object-fit: cover crops faces; set object-position.