CMS Masonry Items Pile up at the Top

Hi
I’m building a masonry design for a web store, in which each element is composed of multiple text blocks, divs and such. I’m using the columns in typography settings to achieve the masonry effect, but for some reason, the top CMS element of the 2nd and 3rd columns don’t take up the place they should, with the effect that they seem to “pile up” under the following elements.

Can anyone help out? BTW I haven’t much coding skills. If code is the fix, can you specify where it should be put please? Thanks!!!


Here is my public share link: [https://preview.webflow.com/preview/roland-michon?utm_medium=preview_link&utm_source=designer&utm_content=roland-michon&preview=d78adc168976fb12c1bd0c4b1fdcf866&mode=preview]=

Good luck!!! it’s great.

Hi @fredericG

Columns are notoriously difficult to work with. Especially with text.

Change Produit Container to display block, then paste the following code in an HTML embed somewhere on the page.

<style>
.produit-collection-item {
-webkit-column-break-inside:avoid;
page-break-inside: avoid;
break-inside:avoid;
}
</style>

That should help prevent the div block from wrapping onto the next column. Then remove margins on Produit Container and Produit Collection Item. Add equal padding on top and bottom to Produit Collection Item and you should have the effect you are after.

1 Like

one of the informative post. Thanks for posting.

A lot of thanks; it works. Thank you very much.

yes very informative post… Thanks for sharing.

If you are using columns to achieve the masonry effect, make sure that the columns have the same width and height for each element to avoid any discrepancy. You can also try using JavaScript or CSS grids to achieve a masonry effect, as these may be more reliable and easier to adjust. Additionally, you may need to adjust the margin, padding, and overflow styling for the elements to ensure that items are correctly spaced and laid out.

Here i can use : khalisthings

thanks its really help me to solve my issue...

Thank you very much for this informative post its really help a a lot...