Efficiently display large list of images in multiple rows and columns in Blazor

Question

I am trying to display a list of 1000+ images in Blazor, while keeping it as performant as possible. The items are displayed in rows, and depending on the size of the browser, the images will become larger/smaller, and the amount of items/row will change. As of now, the images are loaded in a container with some CSS that sets a width the width of the image and gives it float left, meaning all the images automatically pop up next to each other. I have the full list of images in my frontend, so I'm not taking from my backend as needed for now.

I would like to display all images in for example 2x my viewport, but not load all the elements that come after. (https://i.sstatic.net/uPTcr.png)

I have tried to use the component, but that does not seem to work well with having multiple items per row, since this assumes 1 element per row.

Since at the very least I did not want to load all the images at once, I am currently lazyload.js to prevent the images from loading, displaying an empty image if it is not near the viewport. This is not exactly the solution I want however, since I am still adding 1000+ elements to my DOM, causing a delay of a couple of seconds.

Optimally, I would like to have something like the Component, where I can just give my items, say how many extra rows of images or viewport heights should be loaded, without having to give the height of the items or the amount of columns per row.