Help with collection list layout

Design help General
1

Hoping someone can help - I have a collection list which holds various logos. On the case study these logos appear depending on which clients were part of that project.

The issue I am having is designing a layout that works with 1 or 10. Ideally it would change depending on how many logos were selected. Ie if just one was selected the logo would take up the whole column, but when 10 are selected its a grid of 4 across.

Does anyone have any handy tips? I feel like it can be done with flex box but I cant get my head around it

Read only Webflow - Auxilium

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Look into CSS :nth-child() combined with nth-last-child(1).
Together these can be used to style the elements based on the count of items.

I’d use a CSS grid, e.g. 4 cols by 3 rows to accommodate 10 items max.

Then create custom CSS rules using the technique above to control the colspan of the items.

Something like…

1 item = colspan 4 each
2+ items = colspan 2 each
6+ items = colspan 1 each

3

Exactly what I was after. Thanks Michael