Prevent Masonry Grid via Text Column From Breaking Paragraph

I’m attempting to reproduce an existing testimonials page from my site that is made in Wordpress and having a few troubles making it in Webflow.

I’ve got the layout the way I want it and am using the text column setting to achieve the masonry grid. I don’t need the cards to be in any particular order, so I shouldn’t need to use a script from what I’ve read.

The issue I’m having is that the testimonial cards are currently flowing between columns. How can I prevent that so only full cards can flow to the next column? Also when I preview the page in Safari/Mac, I occasionally see some thin white vertical lines in the background and the one of the far right cards extends a few pixels beyond the column width (see arrows on screen shot).


Here is my site Read-Only

I was hoping to do this without needing to use a script since I’d like it to show up properly when viewing it within Webflow and now just on the live site.

To fix the issues, switch from using the text column setting to a CSS grid or flexbox layout for the testimonials so the cards stay together. Add break-inside: avoid; in custom CSS to stop cards from splitting across columns. For the white lines, check if there’s any gap between the columns and try adding a subtle background color to hide them. To fix the card on the right that’s overflowing, make sure the container has overflow: hidden and the card widths are set to fit properly within the columns. Let me know if you need help tweaking this.

You can stick with your current columnated DIV approach, but for each of the “tiles” you want to assign a class like no-column-break.

Then this style chunk in am embed on the page.
This will work in the designer as well.

<style>
.no-column-break {
 column-break-inside: avoid;
 -webkit-column-break-inside: avoid;
}
</style>

Perfect! THANK YOU so much for supplying a good solution. I really appreciate it.