Streaming live at 10am (PST)

Add a unique class to a single CMS grid cell

I would like to add a unique class to a single CMS grid cell.

Naturally, any changes to a CMS grid affect all cells. But I want to apply a class to just one cell (a div block in the cell, to be precise).

[In more detail, I want to add a border on the right hand of the cell - but this is currently appearing on every cell in the grid)

Is this possible?

thank you!


Here is my public share link: LINK
(how to access public share link)

Have you tried to add a class to the div and style that?

If its last or first Item, you can do it by selecting the collection item, make sure you have class on that and click the right arrow to act as subclass, see attached image. Or check this tutorial from webflow Style first, last, odd, even items in your CMS | Webflow University

You’ve taught me something!

But…it’s not quite what I need.

I’m trying to style a 3x2 grid. I want hairline borders between the cells, but not at the sides.

The method eludes me.
For example, adding a lower border to the top row also adds a lower border to the bottom row, which I don’t want.

My goal is add borders to individual cells and rows. Currently, the CMS grid imposes any change to a cell to all the other cells uniformly.

Thank you for your suggestions so far - hugely appreciated, Charles

do you want read only link?

Here’s the link to my page

https://preview.webflow.com/preview/business-age?utm_medium=preview_link&utm_source=designer&utm_content=business-age&preview=81c2839ae19f111964594acea2c3acf5&pageId=61571312e2d0cf1ddd9e6ec1&workflow=preview

I’m trying to get a hairline border between the internal items, but with a gap before the lines meet. Exactly like this site does it:

maybe in collection list, make it gird and cell spacing of 1px (size of the border you prefer), and add background color to the main grid (border color you prefer) then add background color to the cell/item. To wrap the whole table, add border to the main grid.

1 Like

That is a genius way of thinking about it!

Incredibly creative

thanks!

Thanks, glad I can help. I tried it in your shared link

It works well.

But, I ideally wanted a 20px gap between the lines before they meet. (as per Minutehack.com)

I’m finding that effect a little harder to achieve.

Charles

Hey @CharlesOJ,

I think you can’t apply a single class only to one of a collection item. But the @webdev answers seems working well. Otherwise you can try to add some stuff (column, div, etc…) before with your collection into and style that.

I think a best practice is : do not style a collection or an item directly.

Here is an example for a client : Journal de bord V2

In this example the first line with 2 posts has “limit items” set to Show:2 Start at: 1 and the second line : Show:1 Start at: 3 for the left post. So you can use the same collection and apply different style.

cheers


Thank you, yes, I’ve had some success with using two CMS collections in a row; stopping one, and resuming with the second. This allows a change in styling.

Feels like I’m doing it a clumsy way, so I’m appreciative of your insights.

1 Like

hi @CharlesOJ ,

TL;DR add a new div in the collection item, style as divider, negative margin to position it outside the parent, set parent to overflow hidden

Super interesting challenge and i think i found something that works. Gonna try my best to explain it without being able to send back the edited share link. first id suggest removing the combo classes form the collection items.

to create the divider:

  • set the collection item to flex horizontal, full height, bottom border 1px
  • width of content in item 100% with 20px bottom margin
  • add a div into the collection item
  • style the new div as a divider (i did 80% height, 1px wide)
  • position the divider relative and set position top 10% (this is half the remainder to center it vertically)
  • divider then gets margin left 2px, margin right -2px
  • set collection list overflow to hidden
  • bottom border on collection list
  • max width for collection list wrapper is 990px with auto margin, padding 10px

hopefully that helps

PS id suggest filtering the various collections with a category (dropdown option in the CMS), as using ‘starting at’ will require you to shift everything if new content is added above. and this method allows you to do both rows with one collection.