Virtual list in a Grid format

I have a catalog of products that I am rendering using virtual list because products are over thousand and I need them all loaded on same page. Virtual list works well for that but issue I am having is that when I change styling to make it a grid it leaves a big gap at bottom probably because of the way virtual list is rendered and page starts to behave funny.

How can I display virtual list in grid format or is there a better way to do this?

item template code that I am using:

      '<li class="{{cats}}" id="item-{{id}}">' +
        '<a href="/catalog/{{id}}/" class="item-link item-content">' +
          '<div class="item-media">' +
            '<img src="{{image}}" width="150"/>' +
          '</div>' +
        // '<h2 class="product-name">{{id}}:{{title}}</h2>' +
          '<div class="item-inner">' +
            '<div class="item-title-row">' +
              '<div class="item-title">{{title}}</div>' +
              '<div class="item-after">{{price}}</div>' +
            '</div>' +
            '<div class="item-subtitle">Catgories: {{cats}}</div>' +
            '<div class="item-subtitle">Type: {{type}}</div>' +
            '<div class="item-subtitle">Qty Per Pack: {{qtypp}}</div>' +
            '<div class="item-text">SKU: {{sku}}</div>' +
            '<div class="item-text">Barcode: {{barcode}}</div>' +
          '</div>' +
        '</a>' +
      '</li>'

VL has cols parameter, it needs to reflect your CSS styles

Thanks, following post helped if anyone else need helps with this.

One issue I found though is that when I change to grid there is still a huge gap left at the bottom of grid. It seems as if list height is still same and not adjusted for grid? Is there some setting I need to change?

For the virtual list container:

<div class="list virtual-list row products searchbar-found" style="align-content: flex-start;"></div>

For the item template:

  '<div class="col-33 product" style="height: 260px;">' +
  '<a href="/catalog/{{id}}/">' +
    '<div class="img-wraper">' +
      '<img class="p-img" src="{{image}}"/>' +
    '</div>' +
    '</a>' +
    '<div class="p-name">{{id}}:{{title}}</div>' +
    '<div class="p-sku">SKU: {{sku}}</div>' +
  '</div>'

VL parameters:

    el: '.virtual-list',
    cols: 3,
    createUl: false,
    height: 260,
    items: items,

Do you have a live example or JSFiddle with the issue?

Hi, Thanks for reply and sorry for late response, had some time off for holidays.

I don’t have JSFiddle, I will look into and try to create one.

I learned that when I remove following divs the extra space at bottom of list was no appearing any more. so I just removed these divs. It seems issue is that VL somehow calculates the height more then needed and renders in less height.

'<div class="item-subtitle">Catgories: {{cats}}</div>' +
'<div class="item-subtitle">Type: {{type}}</div>' +
'<div class="item-subtitle">Qty Per Pack: {{qtypp}}</div>' +
'<div class="item-text">SKU: {{sku}}</div>' +
'<div class="item-text">Barcode: {{barcode}}</div>' +