Jump to content

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

Recommended Posts

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?

image.thumb.png.01bfc3ea3ef9993f8dd976d055efcde0.png

Edited by TamasTheTraveller
Spelling mistake
Link to comment

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/

ย ๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Squarespace plugins

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design Services

๐Ÿ“…ย Todoist alternative | Increase your Productivityย 

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 300 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

Link to comment

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

ย ๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Squarespace plugins

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design Services

๐Ÿ“…ย Todoist alternative | Increase your Productivityย 

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 300 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

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.