# Broken Grid

> Elements that deliberately break out of their expected column positions — overlapping, offset, or rotated to create energy and rhythm.

- Category: Layout-driven
- Era: 2016–present
- Origin: Swiss print typography tradition; editorial experimentation on the web
- Lesson: https://design.dawit.dev/styles/broken-grid
- Try it: https://design.dawit.dev/styles/broken-grid?style=broken-grid

## Where it came from

Deliberate off-grid placement has a long history in Swiss typography and editorial design. On the web, CSS Grid's explicit placement control made it practical to position elements precisely, overlap them, and rotate them without hacks. Creative agencies and editorial sites adopted it to escape the "Bootstrap look" — identical left-aligned columns — and signal that the design itself is a craft object.

## How to spot it

- Elements that cross column boundaries or overlap adjacent items
- Deliberate small rotations on cards or images (1–5 degrees)
- Asymmetric layouts that refuse consistent outer margins
- Negative space used intentionally — the gap is as designed as the content

## Strengths

- High visual energy and sense of dynamic movement
- Feels crafted and intentional — resists the generic template look
- Each layout is distinct; nothing repeats in the same way twice

## Weaknesses

- Very hard to maintain as content volume scales or changes
- Tab order and screen-reader order must be checked carefully
- Requires significant responsive redesign at mobile widths

## In the wild

- Creative agency portfolio index pages
- Editorial art direction on long-form features
- Art and fashion brand websites

## Use it when

Agency portfolios, artist sites, or editorial layouts where the design itself is a signal of creative capability.

## Related styles
[Swiss / International](https://design.dawit.dev/styles/swiss.md), [Editorial](https://design.dawit.dev/styles/editorial.md), [Maximalism](https://design.dawit.dev/styles/maximalism.md)