Proper way to add the row gap

[cojoclaudiu]

Hello, what is the proper way to add the row gap between elements?
At the moment I'm using margin bottom to all the elements in the list but when I scroll to the last element I get a "little jump" of the scroll if I try to scroll more.

[cojoclaudiu]

I think this is the fix of my issue https://virtuoso.dev/troubleshooting/#list-does-not-scroll-to-the-bottom--items-jump-around

[Sajarin-M]

I use this method to add a gap between elements ( this may not necessarily be the optimal method )

1. Create a wrapper component that wraps the item content:

const Wrapper = (props) => <div {...props} className='wrapper' />

2. Pass the wrapper component as the Item prop in the Virtuoso component:

<Virtuoso
  components={{ Item: Wrapper }}
  itemContent={ /* content  */}
/>

3. Use CSS to add a gap between the wrapped items, except for the first item:

.wrapper:not([data-index='0']) {
  padding-top: 0.6rem;
}

[Richienb]

How I did it (don't use margin!!):

<Virtuoso
	data={images}
	itemContent={(index, src) => {
		return <img src={src} alt="" style={{
			paddingTop: index === 0 ? 0 : 8,
		}}/>;
	}}
/>