Collection list grid with more than 100 objects

[alittle116 (Adam Little)]

Hi All,

I have a CMS collection with 200 items.

To get around the 100 item limit for Collection Lists, I created two Collection List Wrappers. The first displays items 1-100 and the second displays items 101-200. Each list has 3 columns to make a grid.

I use custom code to hide collection items that do match the current calendar day and time. After the items are hidden, the page will typically display 2-10 matching items.

The problem is that it does not result in a fluid grid because items from the second collection list always begin on a new row.

See attached screenshot

• First collection has two matching items
• Second collection has 3 matchin items
• This results in an empty space in the first row

The only workaround I have seen is here: How to make a fluid grid from a collection list

However, in this solution, a separate collection list is created for each collection item. Since I will have hundreds of collection items, this will become very labor intensive.

Any ideas? Thanks!

[samliew (samliew.com)]

With a bit of custom code, you can merge items into the same list. If you need help, please click on this link and read the instructions.

[alittle116 (Adam Little)]

that link did not work. can you try again? thanks

[samliew (samliew.com)]

That link is working as it should.

[alittle116 (Adam Little)]

It’s taking me to Posting Guidelines for the Design Help Category

[samliew (samliew.com)]

Yes, please provide the required information listed.

[alittle116 (Adam Little)]

@samliew Thanks for clarifying. Here are the links:

http://radio-wav.webflow.io/
https://preview.webflow.com/preview/radio-wav?preview=e22b488678b563c4b9b5f88839004c58

Note that depending on the time of day (which determines which items appear), the problem illustrated in the screenshot might not be visible.

[samliew (samliew.com)]

Here’s the code you need to move ALL collection items on the page into the first collection list, then delete the other (now empty) collection lists.

<script>
$('.w-dyn-item').appendTo('.w-dyn-items:first');
$('.w-dyn-list').slice(1).remove();
</script>

Paste this in Page Settings > Footer Code

[alittle116 (Adam Little)]

@samliew worked like a charm! thanks.