Build a No-Code Masonry Layout in Webflow

You can build that cool Pinterest-style masonry layout in Webflow — items of different heights fitting together like magic — without writing a single line of code. Webflow doesn’t ship a built-in masonry feature, but the humble CSS columns property gets you there with one setting in the Style panel.

It works on anything, but it really shines with a Collection List: point the columns at your CMS content and every item flows into place automatically. In this lesson I’ll walk through two real examples — a testimonial section and an image gallery — plus the small trick that stops cards from breaking across columns, and a quick scroll animation to bring it to life.

Before you reach for it, it’s worth knowing exactly what you’re getting: a genuinely fast, no-code layout that’s perfect for dynamic content, with a couple of honest trade-offs I’ll be upfront about at the end.

How it works

Instead of Grid or Flexbox, this technique uses the CSS multi-column layout. You set the columns property on the container — the Collection List itself — and the browser distributes the child items across that number of columns, top to bottom. Because it’s just a typography setting, there’s nothing to wire up: add or remove CMS items and they reflow on their own. In Webflow you’ll find it in the Style panel under Typography → Columns; set it to three, or however many your design needs.

Spacing has two parts. The column layout comes with a default column gap of 1em, which you can change to taste (something like 1.5rem). What it does not give you is space between items stacked in the same column, so you add a bottom margin to each item to breathe. Responsiveness is the easy part: at each breakpoint you just set a different column count — say two columns on tablet and a single column on the smaller landscape and portrait breakpoints.

The one quirk to know about is that a single item can get split between two columns, which looks broken. The fix is one line: select the item (the direct child of the element you set columns on) and add the custom property break-inside with the value avoid. That tells the browser to keep each card intact inside one column.

Two honest trade-offs. First, the flow is vertical — items fill one column before starting the next — so the visual reading order isn’t left-to-right. That makes this best when the precise order of items isn’t critical. Second, this isn’t a true masonry grid: items are placed sequentially rather than optimally packed, so it can leave noticeable gaps in some cases, and you have limited control over how elements flow between columns. If you need perfect alignment you’d reach for a JavaScript-based masonry — but for a huge number of cases, this no-code approach works just fine.

How to use it

1. Clone the project. Grab the Webflow cloneable to start from the finished structure, or build along in your own project.

2. Set up your content. Use a Collection List for the items — testimonials, images, whatever you’re laying out. For an image gallery, set each image’s width to 100% so it fills its column on any screen (wrapping each image in a Lightbox component is a nice touch).

3. Turn on columns. Select the Collection List, open the Style panel, and under Typography set Columns to 3 (or your preferred number). That single step gives you the masonry look.

4. Fix the spacing. Adjust the column gap if you’d like (the default is 1em; 1.5rem is a good starting point), then add a bottom margin — around 1.5rem — to the list item so items in the same column don’t touch.

5. Make it responsive. On the tablet and mobile breakpoints, set a smaller column count — for example two columns on tablet and one on the landscape and portrait breakpoints.

6. Stop cards from splitting. Select the collection item (the direct child) and, under Custom Properties in the Style panel, add break-inside with the value avoid so each item stays in one column.

7. Add a scroll animation (optional). Select the item, go to Interactions → Scroll Into View, choose Slide and From Bottom, and set an offset like 25%. Now items ease in as the visitor scrolls, which makes the whole layout feel alive.

If you’d rather set the core properties in code, the four values from this lesson map directly to CSS:

/* On the Collection List (the container) */
.collection-list {
  columns: 3;
  column-gap: 1.5rem;
}

/* On each collection item (the direct child) */
.collection-item {
  margin-bottom: 1.5rem;
  break-inside: avoid; /* keeps each card whole */
}

/* Gallery images */
.gallery-image {
  width: 100%;
}