Asymmetric Split
also known asunequal columns · 60/40 split · magazine split
A two-column layout where the columns have intentionally unequal widths, often 60/40 or 70/30.
An asymmetric split breaks the symmetry of a 50/50 layout to create hierarchy and visual tension. The wider column carries the primary content (a hero image, a long-form passage, a featured product); the narrower column carries supporting metadata, navigation, or quotes.
Editorial designers have used asymmetric splits for decades — magazines almost never use 50/50 spreads. The pattern translates well to web because it gives reading order: the eye lands on the wider, heavier side first.
- Editorial article layouts
- Hero sections pairing copy with a single visual
- Product detail pages with image + spec sheet
- Side-by-side comparisons that need visual parity
- Forms — symmetry helps scanning
- +Anchor the heavier column to a visible grid line
- +Use generous gutters (48px+) so the imbalance reads as intentional
- +Let one side breathe with whitespace
- −Don't fill both columns to the same height — break the symmetry
- −Don't use asymmetric splits below 768px width — collapse to stacked
Textbook examples in the directory
High-contrast red, oversized Playfair headlines, dense editorial layout.
A warm, high-contrast palette rooted in broadsheet newspaper aesthetics.
Design-studio editorial. Massive display serif at 7rem with tight tracking, hairline rules between sections, asymmetric column grids, captions in small-caps mono. One ox-blood accent. The page reads like a printed monograph.
People also ask
What's the best ratio for an asymmetric split?
60/40 and 70/30 are the most reliable. The golden ratio (~62/38) is also common in editorial design.
Should I use asymmetric splits on mobile?
Stack them vertically below 768px. Asymmetric ratios become invisible at narrow widths and just feel cramped.