Why we use a 4-column grid for everything and it almost never shows
When we show clients design mockups, the grid is never what they notice. They see the colours, the photography, the headline font. The grid is not a thing they think about. This is correct. If the grid is visible, something has gone wrong. But the grid is the reason the design works, and understanding it is the difference between a layout that holds and one that slowly falls apart as content changes.
We settled on a base 4-column grid for almost everything we build. Not because it is the only right answer but because it is flexible without being arbitrary. Four columns divide into two, which gives you symmetric two-up layouts. They divide further into eight narrow units on wider viewports, which gives you asymmetric layouts where content and context sit comfortably side by side. The system can accommodate most content patterns without you having to make exceptions.
What the grid actually does
The grid's job is to make decisions before they become problems. When a designer adds an element to a layout, the grid answers the questions: how wide should this be, where should the left edge land, how does it relate to the element next to it. Without the grid, those decisions get made individually each time, and inconsistency accumulates. With the grid, each decision is a small act of agreement with every other element on the page.
We enforce grid alignment in our Figma files with auto-layout and explicit frame constraints. This sounds tedious but it saves time in the handoff to development because there is no guessing involved. When a developer asks where an element sits, the answer is "eight units from the left edge, spanning three columns." That translates directly to CSS values.
Mobile is where grids are tested
The place where most grid systems break down is on small screens. A 4-column grid at 375px with reasonable gutters does not give you enough room to run multiple columns of meaningful content. You collapse to two columns or one. How you handle that collapse reveals whether the grid was thoughtful or just imposed from desktop.
Our breakpoint logic is documented explicitly: at what width does each pattern collapse, and what is the minimum column count before the layout switches to stacked. We test these transitions on real devices, not just resized browser windows, because the visual experience of the layout at 375px wide differs from the experience in a browser panel.
The grid is not the interesting part of design. It is the part that makes the interesting parts work. That is exactly why we treat it as seriously as we do.