Structure should serve content, not the reverse

Early versions of our layout system used a strict twelve-column grid with fixed gutters everywhere. It looked elegant in isolation. It looked terrible the moment a headline ran long, or an image came in the wrong aspect ratio, or a card needed just slightly more breathing room than its neighbor. The grid was dictating outcomes it had no business dictating.

We rebuilt it around flexible tracks instead of fixed columns — minimum widths with room to grow, gaps that scale with the viewport instead of snapping to breakpoints. The system became less predictable in the abstract and dramatically more predictable in practice, because it started responding to the actual shape of the content instead of forcing content into a shape decided months earlier.

When to break the grid on purpose

The grids that feel most alive are the ones with one or two intentional exceptions — a full-bleed image, an asymmetric feature card. Consistency creates trust; a single deliberate break creates emphasis. The trick is making sure it reads as a choice, not a bug.