Streaming live at 10am (PST)

Controlling Grid Child Settings (Column/Row Span) on Collection Item? (Effect desired = uneven grid)

Hi there,

I am creating a work index page of CMS items and I’d like CMS items to show up as different sizes on a page. This site does a great job at exemplifying the effect I’m going for.

This would be easy to achieve with CSS grid, what I’m struggling with is trying to control the items in that grid with the CMS.

I am aware of the .nth child technique, and also aware of the technique of adding multiple collection lists and “filtering” them (shown by Nelson here) - but I’d like to see if there is a way to control how many columns a collection item spans from inside the CMS.

I have assigned each collection item a unique ID using this technique (btw, thanks @Kwalker1995 !!!) , but can’t figure out how to apply grid child settings to that unique ID.

Anyway, here is where my site is at now.
https://storytk2021-testingsite.webflow.io/work
and read-only link

happy to dig into some custom code, just not sure where to start. Thanks everyone!

_W

Hi @WinstonStruye you can achieve this in a very similar way to the unique ids technique, using jQuery. Start by adding an options field to your items cms, give the options of 1, 2, 3 and 4. Then add a text element to your collection items and giving it the class of ‘column-span-size’ and have it get text from that options field. Then add this code to your page in an embed element.

<script> $(document).ready(function(){ $('.collection-item').each(function() { $(this).css('grid-column', 'span '+ $(this).children('.column-span-size').text().trim()); console.log("column span added");}); }); </script>

I’ve also created a guide on this which you can find here.

2 Likes

@Kwalker1995 - you’re amazing! Wow … so simple. And totally makes sense. I can also just simply modify that code to add a few other css things (I might need to add row-span as well, we’ll see.) Now that I have the explanation I can figure out a lot with this.

Here is the result with no styling, obviously, that will come later. Just needed to figure out the foundation.
https://storytk2021-testingsite.webflow.io/work

But again, thanks so much!

_W

1 Like

thanks so much for this @Stan ! I think the other solution proposed in here works a bit better for me as I’m looking to control this within the CMS, but you’re detailed response was helpful for me to understand a few things, thanks!

@WinstonStruye you’re more than welcome, glad to help

1 Like

Hi @WinstonStruye No problem :wink:

1 Like