On a laptop, the bento grid I built for a pottery studio's product page looked like a shop window. One big photo of a mug filled the left side, with smaller tiles around it for glaze close-ups, dimensions, care instructions and a short note from the maker. Then I opened it on my phone, and the window turned into a hallway.
That's the catch with bento grids. On a wide screen, tiles of different sizes sit side by side, and the size difference tells you what matters. On a narrow screen, most grids collapse into a single column. Every tile ends up the same width, so the hierarchy that made the layout work is gone. That matters because phones are where a lot of the shopping happens. Red Stag Fulfillment puts mobile at 57% of global ecommerce sales in 2024.
Where it helped
The tiles split the information into chunks, and that was good. Each tile had one job: size, care, shipping. On a phone, that was easier to skim than a long paragraph of product description. You could thumb past what you didn't need and stop at what you did.
The glaze close-ups also held up well. I kept those as a two-column row on mobile, and small photos side by side still read clearly. For handmade work, where no two pieces match exactly, those details are part of the sale.
Where it got in the way
The biggest problem was the buy button. On desktop, the price and add-to-cart sat in a tile right next to the main photo. When the grid collapsed, they followed the order of the code and ended up below several other tiles. A shopper on a phone had to scroll past care instructions just to buy a mug.
Text tiles were the second problem. I'd given them fixed proportions so the grid looked tidy, and on a small screen the text got cramped or cut off.
Here's what I'd do now:
- Write out the tiles in the order a phone shopper needs them: photo, price, button, options, then everything else.
- Make that the order in the HTML, which also helps screen readers, and use CSS grid areas to rearrange things on desktop.
- Keep side-by-side tiles on mobile only for images.
- Let text tiles grow as tall as their content needs.
A bento grid is really a phone list laid out for a wide screen, so get the list right first.
