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
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.
That is a genius way of thinking about it!
Incredibly creative
thanks!
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 : The Voyager Times
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.
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:
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.
