The grid that broke on one store and nowhere else
An installation FAQ on a product page showed four images that were meant to tile two by two. On one regional store they stacked in a single column with an empty column beside them. Same theme, same product template, same inline grid styles, correct everywhere else. The obvious diagnosis is that something is overriding the CSS.
What we found
Nothing was overriding it. The grid declaration was inline, it was winning, and DevTools confirmed it. The layout was doing exactly what it was told.
Every direct child of a grid container becomes a grid item, and that includes text nodes. Ordinary whitespace between tags collapses to nothing, so it never becomes an item. A non-breaking space does not collapse. Someone had pasted the block of images into a content field and the paste had left a pair of non-breaking spaces in front of each image. Each pair became its own invisible grid item. With two columns, the sequence lands as spacer, image, spacer, image, so column one filled with blank spacers and every image queued up in column two.
The part that matters for anyone trying to fix this from CSS: you cannot. Anonymous grid items generated from text nodes are not selectable, so there is no rule to write against them, and shrinking the font does not help because each column track is sized by the track and not by its contents.
What we did
Stripped the non-breaking spaces out of the content field. That field was shared by every product using the FAQ, so one content edit fixed every affected page with no theme change at all. We also picked up a second problem in the same field while we were in there: its links pointed at a different region’s domain.
What to take from it
When the same code renders correctly on one store and incorrectly on another, stop reading the CSS. Theme code is shared, content is not, and on Shopify a surprising amount of layout actually lives in content: metaobjects, metafields, rich text fields, anything an editor can paste into. Diff the content, not the stylesheet.
This is also a good argument for treating pasted HTML as untrusted input. Editors, word processors and email clients all inject non-breaking spaces, and they are invisible in every interface a merchant uses to review their own work. The character does nothing visible until the day it is sitting inside a layout container, and then it takes a page apart.
