Dynamic auto-grid based on quantity of collection items

Hi,

I’m wondering if it is possible to dynamically control the grid based on the number items being loaded into the grid.

With my project, I’m using a collection page (Client Projects), that uses reference fields to pull in images unique to each client. That works fine, and displays as is intended, but is it possible if, for instance, a client has only 3 images to pull in the grid displays all 3 stacked, full-width (i.e. 1 col), but if there is greater than 3 (or a pre-set number), the grid pulls them into a 2 col layout? And even better, if there is greater than y amount of images, they tile into, say, a 4 col layout.

It would be a bit like using the ‘limit items’ setting, but set on the quantity of items in the collection, rather than a manually entered figure.

Btw, the grid is responsive, and shifts down from 2col to 1col as device size reduces. This is not a question about making the grid device responsive, rather making it responsive to the quantity of items it needs to display.

In relation to the read-only link;
‘Client-Projects Template’ is the Collection page that the problem applies to.
‘Massing Studies’ and/or ‘Floorplans & Sketches’ are the elements on the page that contain collection lists that I want to apply this to.

Thanks in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/maisonspaces?utm_medium=preview_link&utm_source=designer&utm_content=maisonspaces&preview=3707bc04935fcbefeb04320427f0b319&workflow=preview