A Google reviews masonry layout for mixed-length stories

Let each review take the space it needs

Real comments rarely arrive in matching lengths. One customer writes a sentence; another explains the whole experience. A masonry layout keeps each review card at its natural height, placing shorter and longer cards in staggered columns. It is useful for a review-rich home page section, an about page, or a broad social-proof area where visitors have time to browse.

Masonry gives the page a more informal rhythm than an equal-row grid. Use it when the variety itself helps tell the story. If the section must be very orderly beside a pricing table or a compact product description, the regular grid may fit better. Know how the order works. Cards fill the first column from top to bottom, then the second, then the third. So with “newest” sorting, your newest review sits top-left and the second-newest sits below it, not beside it. Put your most relevant reviews first and inspect the page with its real content after publishing.

Control the columns and the review mix

Choose two, three, or four columns and adjust the gap in the builder, from 0 to 32 pixels. Wider gaps give each card more breathing room; narrow gaps fit more content in one view. The cards avoid splitting across columns. Review controls let you set a maximum number, sort newest, highest, lowest, or random, choose a minimum star rating, and hide empty comments. You can hide single reviews and build a named collection for a particular topic.

For design, set card and background colors, text and star colors, fonts, spacing, borders, rounded corners, and shadows. Show reviewer photos and dates if they help, or hide them for a quieter text wall. A truncation limit stops a very long review from dominating its column. Do not cut every card to the same length if you want the staggered look. Keep the original customer wording and avoid turning an excerpt into a different claim.

What changes on mobile?

The published widget measures its own width. A container under about 800 pixels gets two columns at most, and one under about 500 pixels gets one column. A phone therefore shows the reviews as a vertical sequence. This makes the content readable, but a large review limit creates a long scroll. Preview the phone layout and check where the next page section begins. A short selection near the top and a fuller collection farther down can be easier to navigate.

Be deliberate about page weight

Every selected card appears in the masonry section; there is no slide to hide the rest. Keep the number of reviews proportionate to the page’s purpose. If reviewer photos are shown, the builder offers lazy image loading. A text-first wall can load with fewer images. The widget is inserted with a script tag, so avoid embedding multiple large walls on one page.

Publish it in three steps

1. Add your business with its Google Maps link, then start a widget.
2. Choose Masonry. Set the columns, gap, review limit, and visual style, then check the phone preview.
3. Copy the dashboard script tag into the page section where the wall belongs. Publish and inspect the column flow with live content.

Use the platform guides below if your website editor keeps custom code in a separate place.

Example: a hair salon

For example, a salon might use masonry below a gallery. It could mix a short note about a haircut, a longer account of a color appointment, and a few medium-length comments. That mix gives the staggered layout its purpose. If every card is the same length, a grid may be clearer. Keep the section heading specific to the work shown nearby, and avoid pairing a review with an unrelated photo that could imply the customer described that particular result.

Compare the desktop and mobile reading order after publishing: columns on desktop, one vertical run on a phone. If the section pushes the booking button too far down, reduce the review limit instead of shrinking the text.

Frequently asked questions

Compare layouts and embedding guides