Hi,

I am working on my website and I run into an issue with the simple list and the margin between items. I managed to get the content right, but I would like to get rid off the extra margin between the list items. The idea is to create a bento grid with the same margin between the different items.

Does somebody have an idea how to get rid off the extra margin?

Hi,

The effect you are trying to achieve is called "masonry" and CSS for this is in development https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout

There are plugins to achieve this effect with JavaScript https://masonry.desandro.com/

Hi sorca_marian,

sorry for the late reply and thanks a lot to help out so quickly. I will try it and I hope it fixes my issue.

Cheers

Hi sorca_marian,

so I tried the Grid Masonry, but it doesn´t work with the List-Items I used.

Do you maybe have another idea?

Thanks a lot and cheers

You will need to create new HTML programmatically based on your items to follow the plugin requirements

Hi sorca_marian,

thanks a lot and I will try this weekend.

Cheers