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

Design help CMS
1

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

3

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.

https://webflow.com/website/cms-grid-span-items

5 Likes
5

@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
6

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!

7

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

1 Like
8

Hi @WinstonStruye No problem :wink:

1 Like
9

This is amazing, exactly what I’ve been searching for. I am having a little trouble with responsiveness and I see @WinstonStruye you have figured it out.

Everything on desktop works perfect however I want each item to span 100% width on mobile and can’t seem to get it working. Seems like the grid won’t go down to 2 columns from 3. Any thoughts or input would be greatly appreciated :slight_smile:

Here is where I’m stuck
https://taylor-reddam-woo-portfolio.webflow.io/
read-only link

@Kwalker1995

10

Hi @Kwalker1995 ! Thank you for your resolution. Could it be done also for Row span? I mean, being able to decide how many column span and how many row span, all at once.

Like a way of playing with these two values but with code:
image