Vertical dividers in grid spaces in a CMS Collection List Wrapper

Hi everyone!

As per the title, I’d like to know if it’s possible to place in vertical gridlines in the grid spaces in a:

  1. CMS Collection Wrapper with a grid
  2. standard grid

Basically the red lines below are where I’d want the dividers.

Please note all content is fictional as it’s just to a learning project.

For a static grid, you could create cells for your dividers with a width of e.g. 2px and a DIV with a background color. That would allow you to place image dividers as well like hand drawn line SVGs.

For a CMS-driven grid, I’d use custom CSS to apply a border to all elements except the last one. e.g.;

.grid-item {
    border-right: 1px solid #ccc; 
}
.grid-item:last-child {
    border-right: none; /* removes for last child */ 
}

For a grid with multiple rows, you have the added issue of needing to remove the rightmost item at the end of each row, and that the item counts probably change by breakpoint.

You’d need to handle that with breakpoint-specific media selectors, but the basic approach would look like this for a 3-column grid. This hides the right border for every 3rd item.

.grid-item:nth-child(3n) {
    border-right: none;
}

Thanks so much for your input!

Will give it a go,

Cheers!

Awesome it worked!

Thanks so much!