Quote Masonry Grid
Five quotes at their natural lengths flowing in masonry columns with avatar attributions.
Five quotes at their natural lengths flowing in masonry columns with avatar attributions.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Quote Masonry Grid keeps testimonials at their natural lengths. Five quote cards flow into CSS columns, one liners beside a small essay, so the wall reads like real feedback rather than five quotes edited to the same shape. The lede names the principle, some write essays, some write one line, we kept both.
The quotes are one array, and the masonry comes from CSS columns with break inside avoidance, no library. The length variance is the design, if you trim everything to two lines use three-column-quotes instead. Five to eight quotes fill the columns well.
Reach for this block when you have a pile of real quotes of mixed length and want quantity to read as texture rather than noise. It sits lower on a page than a featured quote block, the wall says everyone, the feature says listen to this one. Pair one long quote with several short ones per column for the best rhythm.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is the raw best of your testimonial pile. Other walls:
Tip: resist editing for length, the uneven heights are what make the wall read as unstaged.