How to add horizontal gap?

[dnish]

Hey guys,
I recently discovered the new gap option. We use a Masonry list and tried to add space between the elements. It seems that the gap gets only added vertically, but not horizontally. Is there any other option for this?

Our virtualizer is configured like this:

   const virtualizer = useWindowVirtualizer({
        count: items.length,
        estimateSize: () => 600,
        overscan: 15,
        gap: 5,
        lanes: 4
    });

[AndreasFaust]

Would be great to have.

[greg-wolff]

+1

[piecyk]

Good idea! Will try to check it out, but as always I’d be happy to accept any PR that includes this improvement.

[AlejandroAkbal]

Yes, please, right now there is no good workaround and I think it would be very simple if it would be integrated directly into the library

[uncvrd]

Hi everyone, I've spent about 2 days on this and I finally have a solution and figured I would share my implementation. My requirements were

1. A responsive infinite grid
2. Grid elements are not fixed in size, but fill the available cell space
3. When resized, adjust column count based on breakpoints so that cells aren't tiny on small screen sizes
4. There should be gaps between rows AND columns, and the gaps are not just padding on the cells themselves since I didn't want any padding on the left-most and right-most columns

To do this, I used two virtualizers: a row virtualizer and a column virtualizer

These separate virtualizers are super important since the row virtualizer establishes the height/position of the entire row of items....instead of just being able to control the absolute position of individual items. By doing so, we can now use display: grid and provide a gap: 24px, which is what will provide us with our horizontal gap on each row without padding on the edges

As a result you get something like this : )

https://streamable.com/7kt0yl

Here is my implementation, I use tailwind which I defined my breakpoints in already, so I can use that as my default breakpoints. This component should be reusable to define your own breakpoints too but most of my elements use the same grid styling

import config from "@foundrydev/tailwind";
import { useVirtualizer } from "@tanstack/react-virtual";
import { debounce } from "lodash";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { screens } from "tailwindcss/defaultTheme";

const twScreens = Object.assign({}, screens, config.theme.screens) as any;

interface PageContentProps extends Props {
    scrollElement: HTMLElement;
}

const defaultBreakpoint: Breakpoint = { maxWidth: 0, columns: 1 };

const defaultBreakpoints = [
    { maxWidth: parseFloat(twScreens["2xl"]), columns: 7 },
    { maxWidth: parseFloat(twScreens["xl"]), columns: 6 },
    { maxWidth: parseFloat(twScreens["lg"]), columns: 5 },
    { maxWidth: parseFloat(twScreens["md"]), columns: 4 },
    { maxWidth: parseFloat(twScreens["sm"]), columns: 3 },
    { maxWidth: parseFloat(twScreens["xs"]), columns: 2 },
];

function PageContent({ count, scrollElement, renderItem, gap, breakpoints = defaultBreakpoints }: PageContentProps) {
    const [breakpoint, setBreakpoint] = useState<Breakpoint>(defaultBreakpoint);

    // calculate the number of rows in our grid based on the number of items passed and the how many items are on each row in the breakpoint (i.e. columns)
    // if columns === 0, we always set to 1 to prevent dividing by 0
    const rows = useMemo(() => {
        return breakpoint.columns > 0 ? Math.max(Math.floor(count / breakpoint.columns), 1) : 1;
    }, [count, breakpoint.columns]);

    // gives us a rough size estimate of each cell in our grid by taking the maxWidth from the breakpoint
    // and removing the gap widths (which doesn't include gaps around the outside, hence the -1)
    // divided by the total columns in this breakpoint. My elements aren't perfect squares but this is close enough
    const estimatedSize = useMemo(() => {
        return (breakpoint.maxWidth - (breakpoint.columns - 1) * gap) / breakpoint.columns;
    }, [breakpoint]);

    const rowVirtualizer = useVirtualizer({
        count: rows,
        estimateSize: () => estimatedSize,
        overscan: 5,
        gap,
        getScrollElement: () => scrollElement,
    });

    const columnVirtualizer = useVirtualizer({
        horizontal: true,
        count: breakpoint.columns,
        getScrollElement: () => scrollElement,
        estimateSize: () => estimatedSize,
    });

    // based on the screensize we can determine our breakpoint (which helps us figure out columns per row)
    const onSetBreakpoint = useCallback(() => {
        const width = window.innerWidth;

        const breakpoint = breakpoints.find((bp) => width >= bp.maxWidth);

        setBreakpoint(breakpoint ? breakpoint : defaultBreakpoint);
    }, []);

    const columnItems = columnVirtualizer.getVirtualItems();

    // adjust the breakpoint when resizing the screen
    // debounce prevents resizing until the user is done adjusting screen size to prevent
    // excessive re-rendering
    useEffect(() => {
        const debouncedResize = debounce(onSetBreakpoint, 150);

        window.addEventListener("resize", debouncedResize);

        return () => {
            window.removeEventListener("resize", debouncedResize);
        };
    }, [onSetBreakpoint]);

    // set the breakpoint on component mount
    useEffect(() => {
        onSetBreakpoint();
    }, [onSetBreakpoint]);

    return (
        <div
            className="relative will-change-transform"
            style={{
                height: rowVirtualizer.getTotalSize(),
                contain: "paint",
            }}
        >
            {rowVirtualizer.getVirtualItems().map((row) => {
                return (
                    <div
                        key={row.key}
                        data-index={row.index}
                        ref={rowVirtualizer.measureElement} // measure each row height, important when resizing the window
                        style={{
                            position: "absolute",
                            top: 0,
                            left: 0,
                            transform: `translateY(${row.start}px)`,
                            display: "grid",
                            width: "100%",
                            gap: `${gap}px`,
                            gridTemplateColumns: `repeat(${breakpoint.columns}, minmax(0, 1fr))`,
                        }}
                    >
                        {columnItems.map((column) => {
                            return (
                                <div
                                    key={column.key}
                                    data-index={column.index}
                                    ref={columnVirtualizer.measureElement} // measure each column height, important when resizing the window
                                >
                                    {/* since our grid items are a 1-dimensional Array[] this calculation determines which index from the source Array[] that each cell will be populated with */}
                                    {renderItem(breakpoint.columns * row.index + column.index)}
                                </div>
                            );
                        })}
                    </div>
                );
            })}
        </div>
    );
}

interface Breakpoint {
    maxWidth: number;
    columns: number;
}

interface Props {
    scrollElementId: string;
    count: number;
    renderItem: (index: number) => React.ReactNode;
    gap: number;
    breakpoints?: Breakpoint[];
}

function InfiniteGrid(props: Props) {
    const { scrollElementId } = props;

    const [scrollElement, setScrollElement] = useState<HTMLElement | null>(null);

    useEffect(() => {
        const element = document.getElementById(scrollElementId);

        if (!!element) {
            setScrollElement(element);
        }
    }, [scrollElementId]);

    // before rendering the grid, I want to make sure the scrollElement is mounted on the page
    // if we just used a ref, the element wouldn't re-render when the value is mounted
    return <>{!!scrollElement && <PageContent {...props} scrollElement={scrollElement} />}</>;
}

export { InfiniteGrid };

You can then use it like this

            <InfiniteGrid
                scrollElementId="MainInfiniteScroll"
                count={landingPageList.length}
                gap={24}
                renderItem={(index) => landingPageList[index] ? <LandingPageListItem landingPage={landingPageList[index]} key={index} /> : <></>}
            />

Where MainInfiniteScroll references your overflow container with <div id="MainInfiniteScroll">...</div>. This was so that I could reuse this component on other pages that have different scrollable containers, and I just swap out the name.

Let me know of any improvements, but pretty pleased with how this is working out. Hope this helps! Took me ages.