Jump to content

How do I reduce margin between Simple List items to create a Bento Grid

Recommended Posts


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?


Edited by TamasTheTraveller
Spelling mistake
Link to comment


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/

Link to comment

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.