search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.26k stars 301 forks source link

[BUG] VirtuosoGrid doesn't seems to support css-grid #966

Closed alexhuot1 closed 1 year ago

alexhuot1 commented 1 year ago

Describe the bug VirtuosoGrid doesn't seems to support css-grid

Reproduction I use the sandbox from the VirtuosoGrid example and change the ListContainer style from a "flex" to a "grid" with a grid-template-column. codesand box exemple

To Reproduce Steps to reproduce the behavior:

  1. Use a css-grid to create the grid-layout for the VirtuosoGrid
  2. Scroll down the grid
  3. Notice that the scroll jumps around and skips some items (after item 10 to 18 in my example).

Expected behavior According to the VirtuosoGrid documentation, css-grid should be supported to create a layout. Therefore, the scroll should be smooth and doesn't jump around.

Desktop (please complete the following information):

Additional context Here's the quote from the documentation:

Either way, it is up to you to implement the layout with Flexbox or CSS grid. You can use plain old CSS or CSS in JS - the example uses Emotion.

So I though that css-grid would be supported, but I might have misunderstood.

petyosi commented 1 year ago

CSS Grid is supported quite well, but it is possible to achieve a broken configuration, like the one in the example. As far as I can tell, the column templates cause rendering of two items per row, while the grid measurements expect more, based on the measurements of the item.

alexhuot1 commented 1 year ago

What do you mean by "grid measurements"? Is it a props that we need to pass? I can find any reference in the code or documentation.