feat: add gap option to allow you to set the gap between items (#689)

* feat: add the gap option to allow you to set the gap between items

docs/api/virtualizer.md

@@ -193,6 +193,14 @@ scrollMargin?: number
 
 With this option, you can specify where the scroll offset should originate. Typically, this value represents the space between the beginning of the scrolling element and the start of the list. This is especially useful in common scenarios such as when you have a header preceding a window virtualizer or when multiple virtualizers are utilized within a single scrolling element.
 
+### `gap`
+
+```tsx
+gap?: number
+```
+
+This option allows you to set the spacing between items in the virtualized list. It's particularly useful for maintaining a consistent visual separation between items without having to manually adjust each item's margin or padding. The value is specified in pixels.
+
 
 ## Virtualizer Instance
 

packages/virtual-core/src/index.ts

@@ -266,6 +266,7 @@ export interface VirtualizerOptions<
   getItemKey?: (index: number) => Key
   rangeExtractor?: (range: Range) => number[]
   scrollMargin?: number
+  gap?: number
   scrollingDelay?: number
   indexAttribute?: string
   initialMeasurementsCache?: VirtualItem[]
@@ -348,6 +349,7 @@ export class Virtualizer<
       measureElement,
       initialRect: { width: 0, height: 0 },
       scrollMargin: 0,
+      gap: 0,
       scrollingDelay: 150,
       indexAttribute: 'data-index',
       initialMeasurementsCache: [],
@@ -536,7 +538,7 @@ export class Virtualizer<
             : this.getFurthestMeasurement(measurements, i)
 
         const start = furthestMeasurement
-          ? furthestMeasurement.end
+          ? furthestMeasurement.end + this.options.gap
           : paddingStart + scrollMargin
 
         const measuredSize = itemSizeCache.get(key)