Grids didn't disappear when component libraries took over. They just moved somewhere less visible.

Design teams now build interfaces from reusable pieces: React components, Figma instances, tokenized cards and buttons. It's easy to assume the grid is a relic of print layout and static web pages. But the components still need somewhere to live, and something has to decide how they align, space out, and behave across screens. That's still the grid's job. Here's what classic grid theory still gets right, and where it needs updating for how teams actually build today.

Why grids still matter when you build with components, not layouts

A component library solves a structural problem: don't rebuild the same button twice. A grid solves a spatial one: where does that button sit relative to everything else? Josef Müller-Brockmann's foundational argument was that a grid creates order so large teams can produce consistent work without renegotiating every layout decision. That's the same problem component systems solve at the code level, just for structure instead of space. Confusing the two is a common cause of interfaces that use consistent components but still feel visually chaotic from screen to screen.

The classic toolkit, restated for component thinking

The old tools translate more directly than most teams realize:

  • Column grids, like the 12-column system used in Bootstrap and Material Design, still define how components span and wrap at each breakpoint. A component's width is a column span, not a pixel value.
  • Baseline grids, historically tied to typographic leading, map directly onto the 4px/8px spacing scales that now anchor tokenized systems. The "8-point grid" is a direct descendant.
  • Modular grids, rows and columns forming discrete content units, are the clearest ancestor of card-based layouts. Each module holds one unit of content, exactly the logic behind today's card grids.

Where CSS Grid and Flexbox changed the practical mechanics

CSS Grid lets developers define row and column tracks natively, so the grid lives in the same code layer as the components, no wrapper divs required. Flexbox handles one-dimensional alignment inside a component, like items in a nav bar. Most real interfaces use both at different scales. Because CSS Grid supports subgrid, a parent layout and a component's internal grid can lock to the same tracks, solving the old problem of components breaking a page's grid when dropped into a new context.

Design tokens as the bridge

Design tokens let spacing and column widths be defined once and referenced everywhere. A spacing scale like 4/8/12/16/24/32 is effectively a codified baseline grid, values in a file instead of guides in a layout tool. That's the real shift: grid authority now lives in the system, not the page, which means grid discipline gets enforced through tokens and component APIs rather than visual guides alone.

Understand that shift, and your components will hold together no matter who builds the next screen.