How to efficiently hide out of stock products in collections?

A while ago, we employed on both search.liquid and collection-template.liquid this piece of code:

{% if item.available %}
{% include ‘product-grid-item’ %}
{% endif %}

This hides out of stock products from our collections pages. However, the in-stock products don’t all get consolidated to fewer collection pages. In some collection pages, we have blank results for some paginated pages. Try clicking page 2 and page 3 and page 4 of this collection for example.

https://craftshack.com/collections/variety-pack?page=1&t=1641417691293

Is there a better way we can achieve this so that the pagination is not getting out of whack?

https://help.shopify.com/en/manual/products/inventory/getting-started-with-inventory/hide-out-of-stock