CMS grid - automatically repeat layout

[Macker (Chris MacDonald)]

Hi all,

I’m looking to create a CMS grid that shows projects. I’m looking at having it as an “uneven” grid, so the first column is (for example) 1fr and the second is 2fr, then on the next row this layout is reversed, or even something totally different…

This works fine for the current number of objects that we have in the CMS, but what happens to the layout if I add more? How does webflow know how to position the new content in the grid? If there a way to set up a small section of the grid and this then repeats for all subsequent content?

I hope this makes sense, but please let me know if it doesn’t!

[Edit]

Here’s an example of the style that my colleague has mocked up (not using cms): https://rl-tw-mock.webflow.io/sector-template-2

The irregular styling of the grid looks really nice, but I assume it would fall back to a regular grid if more projects were added?

Thank you in anticipation.
Chris

---

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

[DuncanHamra (from Memberstack)]

Hey @Macker

Is this what you’re looking for? Webflow Showcased | gridder-cms-grid

More CMS Grids here

[Macker (Chris MacDonald)]

Hi Duncan,

That’s fantastic, thank you.

I’ve got it (loosely) working however it isn’t much in the way of documentation for it. In the example you linked to it works by adding custom attributes that gives each CMS item its own span on the grid - however as you can imagine doing this for a collection that has hundreds of items in is a non-starter.

Any ideas as to how to get it to automatically assign spans?

Something along the lines of grid-item-1+every-nth-item?

[edit] Either I am using this wrong, or I have found a bug. This seems to work as long as the number of custom attributes you have set up matches the number of items being pulled in from the CMS.

For example if I have 10 items on my page, and 10 custom attributes then it loads fine. If however I have 5 items on my page, it doesn’t work.

Any help with this is really much appreciated.

[webdev (Jeff Selser)]

Custom CSS can get the job done. Look at :nth-of-type() - CSS: Cascading Style Sheets | MDN where you set the span of an item viia the grid-column shorthand property. grid-column - CSS: Cascading Style Sheets | MDN

[Macker (Chris MacDonald)]

Hi Jeff,

That looks like it also might be the kind of thing I need, but being a novice at this… Where would I put this code? Will it definitely work with CMS?

Do you have an example of it in webflow that I could take a look at?

I feel like I’m out of my depth here. Would I name my collection list “grid-column”? Or the collection item?

It says “There is no way to select the nth-of-class using this selector. The selector looks at the type only when creating the list of matches.” ???

Many thanks,
Chris

[Macker (Chris MacDonald)]

Update, I think I’m starting to get there.

I just don’t quite understand the syntax/math yet. When I draw this layout out by hand, I can quite easily see the pattern and where it repeats - but struggling to work that out at the moment.

[Macker (Chris MacDonald)]

Cracked it!

Thanks all for the help. Here’s the code for anyone who wants to do the same in future. “example” being the class name of the collection item.

To any novices (like me) the code is broken down like this:

.example:nth-child(5n+1) {grid-row: 1 / span 2;}

• .example: (this is the class you’re targeting)
• nth-child(5n+1) (this says do this to every 5th item in the list plus the first item)
• (grid-column: 1 / span 2;) (this lets you specify the starting column of the item in the grid, and tells it to span 2 columns)