Asymmetrical web design layout: movement on a grid, order in reading
An asymmetrical layout puts unequal elements on either side of the page's centre line: a wide image and a narrow text column, a heading pushed to the left with its paragraph offset to the right. Done on a grid, it feels lively and deliberate. Done without one, it just looks misaligned. The grid, the balance of visual weight and the reading order are what keep it under control.
Symmetry, asymmetry and balance
A symmetrical layout mirrors itself: centred headings, equal columns, matching margins. It's calm and formal, and it can be static. An asymmetrical website gives up the mirror but not the balance. A large, light element on one side can be balanced by a small, dark, dense one on the other, in the way a heavy object close to the pivot of a see-saw balances a light one further out. The asymmetric approach was central to the Swiss and modernist typographers of the twentieth century, who used it to make pages feel active while every element still sat on a grid.
Asymmetry still needs a grid
The difference between an asymmetric grid and an off grid layout that looks careless is whether elements share lines. On a 12-column grid, these all count as asymmetrical and all stay ordered:
| Arrangement | Columns | Effect |
|---|---|---|
| Wide image, narrow text | 8 + 4 | Image leads; text reads as a caption or commentary |
| Offset text | Text across columns 5 to 11, nothing in 1 to 4 | A deliberate empty margin that draws the eye to the text |
| Heading left, body right | Heading 1 to 4, body 6 to 12 | Editorial feel; the heading acts as a label for its section |
| Staggered images | 7 + 5, then 5 + 7 lower down | Movement across a gallery while edges still align |
| Overhang | Image spans 6 to 12 and bleeds off the right edge | Breaks the frame once, on purpose |
Notice the gaps in that table: the empty columns are part of the design. An offset only reads as intentional if the same offset repeats elsewhere on the page, so pick two or three positions and reuse them. For the underlying grid, see 12-column grid.
Rules that keep it intentional
- Repeat your asymmetries. If section headings sit in the first four columns, they all do.
- Keep one strong axis. A shared left edge for all body text holds the page together while images and headings move around it.
- Balance weight, not area. A big pale photo can be balanced by a short block of heavy, dark text. Squint at the page: neither side should feel like it's falling off.
- Leave real space. Asymmetry depends on empty areas; crowding the gaps with icons or badges turns it into clutter.
- Break the grid once, if at all. One overhanging image is a statement. Five are a mess.
Reading order and accessibility
Asymmetric layouts tempt designers to place elements wherever looks best, regardless of where they sit in the HTML. Screen readers and keyboards follow the source order, so the HTML should run in the order you want people to read: heading, text, then supporting image. When CSS grid places a later element visually earlier, the focus order can jump around the screen, which disorients keyboard users. Placing items with grid lines is fine; reordering them is where problems start.
Text inside an asymmetric layout still needs a sensible measure. A narrow four-column text block on a laptop might be 300px wide, about 40 characters, which is acceptable for a short caption but tiring for long paragraphs.
On phones
Most asymmetry collapses on a 375px screen because there's only room for one column. Rather than shrinking the offsets, convert them into something that works in one column: a heading that was in the left margin becomes a heading above its text, an overhanging image becomes full-bleed, staggered images become one after another with consistent spacing. Some designers keep a small indent for pull quotes or captions to retain a trace of the desktop rhythm.
Asymmetry in Anticode
All seven of Anticode's design systems share an unequal hero on wide screens: the headline takes roughly three fifths of the width, with a narrower side column beside it. The Swiss system leans hardest on that kind of balance. Its section headings are numbered in the accent colour, and its cards sit under 2px rules rather than in filled boxes, so white space and alignment do the work.
To push asymmetry further, use the layout editor. Arrange a section as a grid, then resize an element by its edge and it snaps to columns, for example 8 of 12 for an image and 4 of 12 for its text. Because sizes snap, offsets stay on the grid rather than landing on arbitrary pixel values, and each element has a minimum width below which it takes the full width on small screens.
Questions people ask
What is asymmetrical balance in web design?
Balancing unequal elements by visual weight rather than mirroring them, so a large light element on one side is offset by a smaller, denser one on the other.
Is an asymmetrical layout harder to use?
Not if the source order matches the reading order and body text keeps a shared left edge. Problems come from reordered content and crowded gaps.
What's the difference between asymmetric and broken grid?
An asymmetric layout stays on the grid with unequal placement. A broken grid deliberately overlaps or escapes it.