[feature] VGrid with autosize grid ceil width and height

[1geekhead]

Is your feature request related to a problem? Please describe. I'm using a grid in the following case:

• the grid grid is built with the grid-autofill property
• the container in which the grid lies can be reduced/increased by opening it with a sidebar
• when decreasing/increasing the width of the container in which the mesh lies, the mesh cells can change width and height thanks to the css properties of aspect-ratio and the previously indicated grid-autofill

All this is necessary for product cards to retain the card design pattern and fill the entire width of the container. in general, the problem is to correctly process such a case for all screen with containers variations

Describe the solution you'd like I would like to see a solution of the hoc type that will calculate the width and height of a grid cell and so that the grid can, based on these values, calculate the correct number of cells

Describe alternatives you've considered Now I see the only solution is to prepare certain sizes. but in the same react-virtualzed there is a component that simplifies this flow.

Additional context I understand that VGrid is still an experimental component, but if this could be corrected it would be very cool. We use your library in a large project because it covers almost all the necessary cases. Thanks for your work!

[inokawa]

Auto sizing grid will be nice. I tried it once but not succeeded at that time. I would love to see if there are virtualized grid implementation that achieved it.

[1geekhead]

Auto sizing grid will be nice. I tried it once but not succeeded at that time. I would love to see if there are virtualized grid implementation that achieved it.

For example in react-virtuoso you can set styles for the container and it turns out that you can get the required markup using CSS. Works with minor problems, in particular sometimes a little more elements are drawn than expected, but overall not so critical: VirtuosoGrid responsive columns example

it seems like the dimensions of the first element are calculated and then the reference point goes to them: VirtuosoGrid

And my grid component looks like this:

const gridSizes = [
  'grid-cols-[repeat(auto-fill,_minmax(34.5rem,_1fr))]',
  'grid-cols-[repeat(auto-fill,_minmax(20rem,_1fr))]',
] as const;

<VirtuosoGrid
      key={activeFormat}
      style={{ height: '100%' }}
      overscan={pageSize}
      computeItemKey={computeItemKey}
      totalCount={totalCount}
      initialItemCount={pageSize}
      rangeChanged={handleRenderChange}
      listClassName={clsx('grid gap-6', gridSizes[activeFormat])}
      itemContent={renderItemContent}
    />

[meotimdihia]

Auto size for horizontal list too. Currently, we have to set the style , ex:height: 300px https://inokawa.github.io/virtua/?path=/story/basics-vlist--horizontal

[szszoke]

Would it make sense to create a second grid component that makes a few assumptions:

• columns have same width
• all columns are visible
• column width is set by dividing the available width with the number of columns

Responsive cells could use container queries. A resize observer could be used to monitor the available width for the grid and set the column count based on it.

And now that I am writing this I wonder if the VList component could be used to implement this.

[inokawa]

@szszoke https://inokawa.github.io/virtua/?path=/story/advanced-dynamiccolumns--default may be close. You can update the number of columns by observing viewport element manually with ResizeObserver. Container query will not work with this implementation though.

[szszoke]

I ended up doing more or less what is in the example you linked.

I also used a resize observer on the container of the VList to change the number of columns based on how much width was available.