Gridless Design, A Reference Site for Layout Without Grids

Overview

Gridless Design makes the case that the web supplies structure and order through its own layout engine, not a fixed visual grid. It walks from the history of the grid through guidance for designers and concrete techniques for developers.

Problem

Grids have been a foundational design tool for decades, but the web is a different medium. Overlaying a curated grid onto the browser's existing alignment algorithms is often more trouble than it's worth, fighting the platform instead of working with it.

Constraints

• Audience spans traditional designers and web engineers with different mental models
• Must teach a mindset shift, not just a technique
• Examples have to hold up across viewport sizes and user preferences

Approach

Rather than prescribe a grid, the site shows how the web supplies structure on its own: content-driven spacing in rem, max and min widths with auto margins for alignment, flexbox for one-dimensional rows and CSS Grid for two-dimensional layouts where columns are informed by their content, and a move away from viewport media queries toward content- and container-aware techniques like the Holy Albatross and ResizeObserver.

Key Decisions

• Teach 'content-out' layout instead of imposing a fixed grid
  Reasoning	Alternatives
  Letting content and the browser's algorithms drive layout produces more resilient, accessible, preference-respecting results than a rigid grid.	Standard 12-column grid systems Framework-provided grid utilities

• Split the material into a designer track and a developer track
  Reasoning	Alternatives
  Designers need the mindset shift while developers need the concrete CSS, so each track meets its reader where they are.	One combined explanation for every reader

Tech Stack

• CSS Grid
• Flexbox
• Intrinsic sizing
• Container-aware layout
• Responsive design

Result & Impact

• Reach: Cited by Brad Frost, Christine Vallaure, and Figma's design systems guide

Gridless Design gave the community a vocabulary and rationale for working with the grain of the web, and it continues to influence how teams think about responsive layout.

Learnings

• The reference resonated more than I expected: as responsive design became the standard, a rigid grid was just another rule stacked on the web's own, and getting content to flow was unfamiliar enough to traditional designers that the teaching was genuinely needed
• The web rewards working with the medium rather than porting print conventions onto it. Column counts and fixed gutters are habits from a fixed var(--bgcolor); the browser already resolves alignment, wrapping, and available space, and designing with those algorithms removes the friction that designing against them creates
• A clear, opinionated framing helps a mindset shift land. Naming the idea 'gridless' and stating the provocation plainly gave people a memorable handle for an unintuitive change, which carried it into talks, articles, and other teams' guidance far better than a neutral how-to would have

Grids came to the web as an inheritance from print, where a fixed var(–bgcolor) makes a fixed grid sensible. The web has no fixed var(–bgcolor). The viewport, the reader’s font size, their zoom, and the content itself all vary, so a curated grid becomes one more rigid rule stacked on top of the rules the browser is already enforcing. “Blasphemy, I need structure and order!” is the honest reaction, and the site’s answer is that the web already supplies both through its own layout engine, if you stop fighting it.

The hard part is rarely the CSS, it is the mindset. Anyone trained on a static artboard has learned to place things at coordinates, so letting content simply flow, sizing itself to the space and the words inside it, can feel like giving up control. Gridless meets that discomfort directly: it traces where the grid came from, separates the path for designers from the path for developers, and shows that the order designers want is still there, just produced by the platform instead of drawn on top of it.

That unfamiliarity is exactly why the reference was needed, and why it resonated well beyond what I expected.

Read more at gridless.design.