Masonry layout

Masonry lays items out as a grid of cards of varying height, filling the space like a pinboard. It shows more of the menu at once than any other photo-led layout.

What it looks like

• Items arranged in columns, each card sized to its content and image.
• Category headings separate the sections.
• Guests scroll vertically through the whole menu.
• Name, price and allergen icons on each card.

When it works

• Photo-rich menus where every item has an image.
• Medium-length menus — roughly fifteen to fifty items.
• Desserts, cocktails, tapas and sharing menus, where guests browse rather than search.
• Sites that want to show a lot of the menu quickly.

When it does not

• Menus with incomplete photography. Gaps in a grid are the most visible failure in any layout.
• Very long lists, where a grid becomes a wall.
• Wine and spirit lists, which are scanned, not browsed.
• Multi-format pricing; four price lines on a card make it top-heavy.

Photography

The grid is only as good as its weakest image:

• every item needs a photo;
• a consistent style matters more than any individual photo's quality;
• mixed orientations are tolerable here — the grid absorbs varying heights — but mixed styles are not;
• avoid one dramatically taller image, which pushes a column out of rhythm.

Descriptions

Keep them short and, above all, similar in length. Card height follows content, so one dish with a paragraph and its neighbours with a line produces a ragged grid.

Use the long description for anything substantial; it opens on demand rather than lengthening the card.

Grid density on a phone

A masonry grid becomes one or two columns on a phone. Check that:

• cards remain readable at that width;
• the price does not wrap awkwardly;
• allergen icons stay on one line;
• the vertical scroll does not become endless — this is where a fifty-item menu turns into a wall.

Ordering

Because guests take in several cards at once, the ordering matters slightly less than in a list — but the first row of each section is still what most people see. Put the items you want ordered at the start of each category.

Check it on a phone

• [ ] Every item has an image; no placeholders are visible.
• [ ] Cards are readable at one- or two-column width.
• [ ] Card heights are reasonably even.
• [ ] Prices are visible without opening the item.
• [ ] Category headings are clear as the grid scrolls.
• [ ] Allergen icons are legible at real size.
• [ ] The page loads quickly enough on a phone connection.
• [ ] Scrolling the whole menu does not feel excessive.