grid-template-columns: repeat(3, 1fr) reads like a promise of three equal thirds, but the specification says no such thing. 1fr is shorthand for minmax(auto, 1fr), and that auto minimum resolves to the minimum content size of whatever is in the track.
What 1fr does not promise
The minimum content size is “the widest thing that cannot be broken onto another line”. For a paragraph that is the longest word. But put something unbreakable inside and the track simply refuses to go narrower than it — so it takes more than its third, steals space from its neighbours, and when that is not enough, pushes the whole layout off the screen.
It is tempting to file this as a mobile problem. It is not. It happens just as readily in a desktop multi-column grid, and is often easier to trigger there, because each track is a smaller share of a wide canvas.
The three lines that fix it
First, set the track minimum yourself: grid-template-columns: repeat(3, minmax(0, 1fr));. Now each track takes its share regardless of content. Anything too wide becomes a problem to solve inside the track, and the layout stops moving.
Second, flexbox has the same trap. A flex item’s min-width defaults to auto, so it refuses to shrink for exactly the same reason. The equivalent prescription is min-width: 0 on the item (or min-height: 0 in a column).
Third, deal with the overflowing content itself. Give code blocks pre { overflow-x: auto; } so they scroll inside their own box, and give long strings overflow-wrap: anywhere.
Auto-placement has the same trap
repeat(auto-fit, minmax(18rem, 1fr)) is a lovely way to let the grid decide its own column count, but on a viewport narrower than 18rem that minimum is wider than the screen and you get horizontal scrolling. Write it as repeat(auto-fit, minmax(min(18rem, 100%), 1fr)) and the minimum drops to 100% on narrow screens, which removes the problem entirely.
The rule reduces to one line: never leave a track minimum to chance. That single habit removes most of the “why has this one section shifted” debugging you would otherwise do.
Reworking a theme’s grid structure continues in the Themes & plugins archive, and front-end and performance work together is what our optimization program covers.
Next part
Sometimes the layout is visibly pushed out and the number the browser reports looks perfectly fine. Next: how to actually find the culprit behind horizontal overflow.