Height calculation in grid layout

[michael-r-elp]

First of all, great project you have here so far.

Now to my issue, I'm trying to render items in a grid see below

<SvelteVirtualList items={imageItems} contentClass="flex flex-1 flex-col gap-4 p-4" itemsClass="grid auto-rows-min gap-4 md:grid-cols-2 xl:grid-cols-3">
	{#snippet renderItem(image)}
            ...
	{/snippet}
</SvelteVirtualList>

But this has the unfortunate side effect of it calculating the wrong height, do you know if there's a good way of showing items in a grid, ideally with dynamic columns?

[michael-r-elp]

Ideally it would be great if during calculation it could check if grid-template-columns is set and account for these during calculation.

Maybe using some function like this:

function getGridTemplateColumnsAmount(element: HTMLElement): number | null {
  if (!element) return null;

  const computedStyle = window.getComputedStyle(element);
  const gridTemplateColumns = computedStyle.getPropertyValue('grid-template-columns');

  return gridTemplateColumns.split(' ').length || null;
}

The above would return the current amount of columns, I'm not sure how well that would do for performance though.

[michael-r-elp]

I created a fork for myself and added the changes for proper height calculation that accounts for grid columns:
main...michael-r-elp:svelte-virtual-list:feat/grid-support

I might make a PR for it at some point, but currently couldn't be bothered to add unit testing and whatever else is necessary to open a PR, I also did not finish properly updating the descriptions for the functions I edited.

It's properly not perfect as well and not sure on the impact on performance with it checking how many grid columns there currently are.

[jaysin586]

@michael-r-elp Are you still using this?