Structure & gridsPattern 03 / 12

Asymmetrical Layout

Uses deliberate imbalance — unequal columns, overlapping elements, and offset grids — to create tension and visual energy that symmetric layouts cannot achieve.

  • Creative agencies
  • portfolio showcases
  • brand landing pages

What you’ll learn

  • How to recognize the structure
  • When it helps—and its trade-offs
  • How it adapts to smaller screens
  • A practical starting point
In this guide

Start with the shape

Read the figure

The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.

Layout anatomyPattern 03
Asymmetrical Layout: structure diagramUnequal shapes can still create a balanced composition. 1: Dominant region. One element establishes the visual anchor and entry point. 2: Counterweight. A smaller or offset region balances the dominant element. 3: Intentional space. Unoccupied areas separate elements and preserve the composition.010203

Unequal shapes can still create a balanced composition.

  1. 01
    Dominant region

    One element establishes the visual anchor and entry point.

  2. 02
    Counterweight

    A smaller or offset region balances the dominant element.

  3. 03
    Intentional space

    Unoccupied areas separate elements and preserve the composition.

How the pattern works

An asymmetrical layout balances elements of different sizes, positions, or visual weight. A large image can counter a smaller, dense text block. An offset card can sit comfortably beside a dominant headline when their alignment and spacing are intentional.

The useful distinction is balance versus symmetry. Unequal columns alone do not make a composition successful. Contrast, whitespace, shared edges, and a clear primary element keep the page understandable.

Where it fits—and what to consider

A useful choice when

  • A brand or portfolio needs a distinctive composition.
  • There is a strong lead image or headline.
  • The content can support deliberate differences in scale.

Be deliberate about

  • Offsets can become arbitrary decoration without clear alignment.
  • Absolute positioning can cause overlap when text grows or the viewport narrows.

Adapt the relationship, not just the size

A useful mobile layout preserves the task and content order while changing how the regions share space.

Asymmetrical Layout: narrow-screen adaptationReduce offsets and stack the content in reading order. Preserve the hierarchy through size and spacing, rather than squeezing the desktop composition into a narrow screen.
Small-screen structure

On wider screens

Use unequal grid tracks and controlled offsets. Keep important content in normal document flow and preserve common alignment lines.

On narrower screens

Reduce offsets and stack the content in reading order. Preserve the hierarchy through size and spacing, rather than squeezing the desktop composition into a narrow screen.

Build the structure

  1. 01Choose one dominant visual element.
  2. 02Balance it with a smaller region and shared alignment lines.
  3. 03Simplify offsets before testing long titles and small screens.
A structural starting pointcss
.composition { display: grid; gap: 2rem; }

@media (min-width: 64rem) {
  .composition {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }
  .composition__aside { margin-top: 4rem; }
}

Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.

A small design exercise

Try it yourself

Use one photograph, one headline, and one action to make an unequal composition. Draw the invisible alignment lines that hold it together.

See a worked example

Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.

Open the example page
A worked example of asymmetrical layoutOpen full page (opens in a new tab)

Put the pattern into practice

Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.

Read the AI layout prompt

Select the text below and copy it into your AI tool. Replace example content with your own.