Increase gap of dynamic list items

Design help General
1

Hi guys,

Problaby an easy question. Is it possible to control the gap between dynamic List items when set to a 3 lay-out? I want to adjust the gap between the items to 4vw so the items are right and left aligned to the edges of the container.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Yes, of course possible :slight_smile:
If you want some help with it, share a read-only link to the project

3

Hi @avivtech, thanks for your reply.
Here is the link: https://preview.webflow.com/preview/art-processors?utm_source=art-processors&preview=63efbc9b12bbf63372e4d84dea8e1aa0

it’s about the dynamic list on the ‘work’ page. I’ve now put it in columns to do the spacing to individual items but would like to adjust the column gap of a collection list.

4

Here you go: :slight_smile:
https://www.loom.com/share/0ef5b79d3687462fb9213efaf93bd374

5

Thanks @avivtech… But unfortunate that’s now what I’m looking for. What I want is to control and increase the gap/gutter between the items while keeping the items in grid (left and right). Have a look at the space between the items as I created them in a column.

6

Now that you have them all under one wrapper, you can change the wrapper display to flex, and then change how each item behaves (Margins and Paddings).

You can read about flex here:

7

Thanks again, I appreciate you helping me out. But unfortunately that’s also doing the trick. What I want is to increase the space between the items, see how I created that effect by using columns and put one collection item in every column. With that I can control the space in the column.

When I put them out of the columns and choose dynamic layout: 3 you can only control the styling of 1 item and apply that to all items. but with that I’m not capable to fit it in the grid.

Hope this is more clear. Summary is to increase to gap between the items while keeping in line with the grid.

8

ok, you were not clear enough which grid you refer to…
You want to keep the items in the same line as the other elements on the screen.

Then simply give the list wrapper negative margins from both sides, until it sits on the grid.

9

Thanks again… but that’s again not what I meant :). I’ve added 2 collection list under each other so we can compare. The first one is the normal dynamic list with a 3 lay-out. Below that Is a list inside 3 columns. You see how the margin differs between the first row and the second row.

What I want is the margin between the individual items bigger but by not putting them in columns.

10

But you did not do what I told you to do… :rofl:

11

Sorry mate thats because it didn’t work. Could you give it a go and make a screen cap of it.

12

https://www.loom.com/share/ce716d9ca5d2461bbda72ab494a58ef6

13

Thanks so much! But now comes the trick… when my client adds a fourth item, the last item needs to be on the second row ;).

14

Give your items max-width

15

Nope sorry, that unfortunately did not work :frowning:

16

what value of max-width did yo give them?

17

Yes, I fixed it.

I removed the display: flex position and gave every item a max-width of 24 vw. Then I added the below custom code before the /body section to align all items on the top.

<style>
.dyn-item {
vertical-align: text-top;
}
</style>

Thanks @avivtech for point me in the right position.

1 Like