Asymmetric grid
A grid whose columns are intentionally uneven in width, creating visual hierarchy through imbalance.
Unlike a uniform grid where every column matches, asymmetric grids assign different widths to different columns — for instance, a 2/3 main column next to a 1/3 sidebar, or three columns with one wider than the others. The visual imbalance creates emphasis. Easy in CSS Grid via `grid-template-columns: 2fr 1fr` or similar.
Also called
broken gridirregular grid
When to use
- Editorial layouts where one column carries more weight
- Designs that need visual rhythm without using a bento grid
- Article + sidebar patterns
When not to use
- Equal-weight content lists (products, search results)
- Forms or settings screens where alignment matters more than rhythm
Related
Source
Editorial and print design tradition; long predates the web.