Layouts

The layout is controlled entirely by CSS. The component is a CSS Grid container, so you set grid-template-columns on it like you would any grid. The library reads the computed grid to figure out column count and row height automatically.

Responsive Multi-column Grid

ngx-virtual-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Columns auto-fill based on available width. Items reflow as the viewport resizes.

Fixed Column Grid

ngx-virtual-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Always exactly 3 columns regardless of viewport width.

Single-column List

ngx-virtual-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

Same component, same API. Works as a drop-in replacement for cdk-virtual-scroll-viewport when you only need a single column.

Drop It Anywhere on the Page

You don't need to wrap your entire page in this component. It works alongside other content. By default it listens for scroll events on window, so it works as part of your normal page scroll.

<h1>My Dashboard</h1>
<p>Some intro text, a navbar, whatever you want up here.</p>

<ngx-virtual-grid [items]="products" (loadMore)="loadMore()">
  <ng-template ngxVirtualGridItem let-product>
    <app-product-card [product]="product" />
  </ng-template>
</ngx-virtual-grid>

<footer>Still works down here too.</footer>

Custom Scroll Container

If you want to put the grid inside a scrollable container (like a panel or sidebar), pass the container element as scrollParent:

<div #scrollContainer style="height: 600px; overflow-y: auto;">
  <ngx-virtual-grid [items]="items" [scrollParent]="scrollContainer">
    <ng-template ngxVirtualGridItem let-item>
      <div class="card">{{ item.name }}</div>
    </ng-template>
  </ngx-virtual-grid>
</div>

This is how the demo page works. The grid is placed inside a 600px container instead of using the full window scroll.