Broken grid layout: overlaps and offsets that keep the reading order
A broken grid layout keeps an underlying column grid but lets chosen elements overlap, offset or cross its lines, so a page feels editorial and less boxed in. It works when the grid is still visible elsewhere, the overlaps are few and deliberate, and the order people read and tab through still matches what they see.
Breaking a grid you can still see
Magazine designers have long set a photograph across the gutter, run a headline over the edge of an image, or pushed a pull quote into the margin. The tension only works because the rest of the spread sits firmly on its columns. Web layouts spent years in rigid rows of equal boxes, partly because floats and early flexbox made overlap awkward. CSS grid, which lets several items occupy the same cells, made layered layouts practical, and the broken grid became a common way to make a site feel designed rather than assembled.
The important word is "broken", not "absent". A page with no grid at all looks random. A page with a firm grid and two or three intentional breaks looks confident. The 12-column grid is the usual base to break from.
Ways to break the grid
- Overlap
- An image and a text panel share some of the same columns and rows, with the panel layered on top. The classic broken grid move.
- Offset
- One item in a row starts lower or higher than its neighbours, so the row steps rather than aligns.
- Bleed
- An image runs past the content column to the edge of the screen while the text stays inside.
- Crossing type
- A large headline runs across an image boundary, part on the photo and part on the ground.
- Scale jump
- One element is much larger than the grid unit suggests, taking columns from its neighbours.
Building a layered layout in CSS
Grid placement is the cleanest way to overlap elements in web design, because both items stay in the normal flow and the container grows to fit them. Give the parent a grid, then place each child on line numbers that overlap: an image on columns 1 to 8, rows 1 to 3, and a text panel on columns 6 to 12, row 2. Raise the panel with z-index so it sits on top. Compared with absolute positioning, this keeps the section's height correct and lets you change the placement at a breakpoint without rewriting it.
- Use
minmax(0, 1fr)columns so long words or images can't push the grid wider than the screen. - Give the overlapping panel a solid background, not a translucent one, so text over the image stays readable.
- Keep z-index values few and small, such as 1 to 3, and document what each layer is for.
Keeping reading order
The main accessibility risk of a broken grid isn't the overlap; it's moving things visually so they no longer match the source. MDN's guide to grid layout and accessibility quotes the CSS Grid specification: grid placement and order are for visual reordering only, and screen readers and the Tab key follow the source. WCAG's Meaningful Sequence criterion, at level A, asks that a correct reading order can be determined where order affects meaning.
- Write the HTML in reading order first: heading, text, image, call to action.
- Place items visually with grid, without changing that order.
- If the visual order truly needs to differ, change the HTML, not only the CSS.
- Tab through the section. Focus should move in the order a sighted reader would expect.
- Check overlaps don't hide focus. A layered panel must not cover a link or button that can receive focus.
When it works and when it fails
| Works well | Fails |
|---|---|
| Portfolios, studios and architects, where the work deserves an editorial frame | Dashboards and forms, where alignment helps people scan |
| One feature section or a hero | Every section, so the page has no calm parts |
| Strong photography with clear subjects | Busy images that clash with the overlapping text |
| A layout that settles into one column on phones | Overlaps kept on a 375px screen, where text covers half the photo |
On phones, most broken grids should simplify: stack the image and text, keep perhaps a small offset or a slight overlap of a few pixels as a reminder of the desktop design, and let content stay readable. Asymmetrical layout covers the related approach of unbalanced but non-overlapping compositions.
Overlaps in Anticode
Anticode's layout editor supports this kind of layout directly. Select an element and drag it within its section: drops become a new order, a layer or an anchor. A layered element sits over its base within an explicit layer group, and can be anchored to one of nine points on the element it covers, such as the bottom left of a photograph, or cover all of it. The keyboard inspector sets layers, sizes and alignment without dragging. Overlap only happens inside those layer groups, and widths are kept within the section, so layers can't spill into the next section or push the page wider than the screen.
Because the editor writes elements in the order you arrange them, the reading and tab order follows what you see rather than a hidden source order. The Swiss and Editorial systems, with their strict rules and grids, make the clearest base for a few deliberate breaks.
Questions people ask
What is a broken grid in web design?
A layout built on a clear column grid where a few elements deliberately overlap, offset or cross its lines to add tension and an editorial feel.
Does overlapping content hurt accessibility?
Not in itself. Problems come from visual order differing from source order, text over busy images, and layers that cover focusable elements.
How should a broken grid behave on mobile?
Usually it should simplify to a stack, keeping at most a small overlap or offset as a hint of the larger layout.