Empty spaces in the grid when using content cards
Symptom: after adding a content card to a collection, the last row of a page shows a couple of products followed by empty white spaces. Why it happens: think of the collection grid in terms of slots — every 1×1 spot is a slot. Say a page shows 16 products in a 4-column grid: that’s 4 rows of 4 slots, each product filling one slot. Now add a content card that’s 2×1. It takes up two slots, and the only way to make it fit is to push down the products that occupied those slots. But the page still contains 16 products, so 18 slots are now occupied — and 18 is not divisible by 4. The result is a new last row with only 2 products and 2 empty spaces. The fix: add more content to the page — content cards, duplicates, and so on — until the number of occupied slots is divisible by the column count again. In the example above, adding 2 more single-slot items brings the page to 20 occupied slots = 5 full rows, and the empty spaces disappear.Do the slot math for desktop and mobile separately: the column counts
differ, and a content card can be limited to one device with its visibility
setting.

