A grid layout with equal-width columns looks straightforward until you actually try to divide a container's width by three and discover the numbers don't divide evenly — 100% divided by 3 is a repeating decimal, not a clean number, and that seemingly trivial arithmetic problem has quietly shaped real layout decisions in CSS for years.
Why three equal columns is a genuinely awkward division
Dividing 100% into three exactly equal parts produces 33.333...%, a repeating decimal that can never be represented with perfect precision in a finite number of decimal places. Any CSS width value using a rounded approximation of that figure — 33.33%, 33.3%, or any other truncated version — introduces a tiny but real rounding error, and when three such columns are placed side by side, that small per-column rounding error can accumulate into a visible layout problem: three columns that should sum to exactly 100% instead summing to very slightly less, potentially leaving an unwanted sliver of empty space, or very slightly more, potentially causing an unwanted wrap to a new line if the parent container has no tolerance for that tiny overflow.
Why this specific problem was historically more disruptive than it sounds
In older CSS layout techniques, particularly float-based layouts that predate Flexbox and Grid, this kind of small rounding discrepancy could actually cause a visible, disruptive layout break — a third column unexpectedly wrapping onto its own new line because the cumulative rounded width of the first two columns plus the third technically exceeded 100% by a fraction of a percent, even though the intended design was clearly three equal columns fitting cleanly on one row. This produced a genuinely frustrating category of bug: a layout that looked correct in isolation, broke unpredictably depending on tiny, easy-to-overlook rounding differences, and was maddening to debug precisely because the actual cause (a repeating decimal that can't be perfectly represented) wasn't visually obvious from looking at the CSS.
How Flexbox and Grid largely solved this problem structurally
Modern CSS layout systems, specifically Flexbox and Grid, largely sidestep this entire category of rounding problem because they don't require you to manually calculate and hardcode a percentage width for each column at all. Flexbox's flex: 1 shorthand tells the browser to distribute available space equally among flex items automatically, with the browser's own layout engine handling the underlying precise distribution internally rather than requiring you to pre-calculate and commit to a specific percentage value yourself. Grid's fr unit (fractional unit) works similarly, letting you specify relative proportions (like three equal 1fr columns) without ever needing to manually convert those proportions into an explicit percentage value that would hit the same repeating-decimal problem.
Why this is a genuinely different mechanism, not just cleaner syntax
It's worth being specific about why this actually solves the underlying problem rather than just hiding it behind more convenient syntax: the browser's internal layout engine handles the precise, sub-pixel distribution of available space using its own internal floating-point calculations at rendering time, rather than being handed a pre-rounded percentage value that already lost precision before the browser even received it. This means the rounding, to whatever extent any rounding still occurs at the level of actual physical pixels on screen, happens at the very last possible step of rendering, using the full precision available at that point — rather than being introduced early, in the CSS source itself, by a developer manually typing in an already-imprecise percentage value.
Why this history is still worth knowing even though it's mostly resolved
Even though modern layout techniques have largely resolved this specific problem, understanding why it existed in the first place explains a design pattern still occasionally visible in older codebases or legacy CSS — width values like 33.33% or 32.9% scattered through older stylesheets weren't arbitrary choices, they were workarounds for exactly this repeating-decimal rounding issue, often paired with additional hacks (a slightly reduced width to leave deliberate margin for rounding error, for instance) to prevent the wrapping bug described above. Recognizing this pattern in an older codebase makes it easier to understand why certain values look oddly specific, and gives good reason to consider migrating that specific layout to Flexbox or Grid, where the underlying problem simply no longer needs a manual workaround at all.
Building equal-width layouts today
Our Flexbox generator and Grid generator both let you build equal-width column layouts using flex-grow ratios and fr units respectively, letting you see the modern, rounding-safe approach in action rather than needing to hand-calculate and commit to an approximate percentage value yourself.