CMS with grid/flexbox - assymetry possible?


I’m new here. Trying to get vertical lines between my blog in a grid. This is what I wanna do:

Notice the thin gray lines between post 1 and 2 and between 2 and 3. Can I do that without having one either left of 1 or right-side of 3?
Only thinking in using borders as I’m not aware of any other tricks.

Edit: The first image didnt show what I’m going for.

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

There are a couple of options you can take here to achieve the separating lines between your columns.

The first is giving the base class of your column a left border and adding a combo class to the first element to remove the left border on that element only. This is possible natively within the Designer, but is a bit less flexible as the first element always needs to have another class applied to it.

The second (which is what I use in my projects) is with custom code and the + CSS selector. This allows me to target elements only if they come immediately after another with the same class. Essentially I can achieve the same effect as above, with only a single class and CSS rule:

  border-left: 1px solid red;

If you run into any issues don’t hesitate to reach out :+1:

Your first suggestion is what I was trying to do but couldn’t find a way to achieve as the contents are dynamic through CMS ← did you catch this part of my problem description?
Reading up on the + selector I think I understand your second suggestion but again, it’s not clear to me if it will work with my dynamic content.

Edit: one solution that comes to mind is using :first-child on the parent class - any comments on that?

hi @AndyOhh sorry to step in and offer another option how to

  1. Set right border in WF GUI (this eliminate to deal with border on left)
  2. Select :last-child of CMS items and set for it right-border: none
.list-item:last-child .content__c{
border-right: none;

if you would like to have higher specificity you can add parent element like this.

.list .list-item:last-child .content__c{
border-right: none;


My apologies, I didn’t see any specifics in the post body but I see you did include that in the post title.

As you and @Stan touched on, there are :first/last-child selectors that can be used to target the element (without a combo class) and both would work as well to solve the issue. There are typically lots of different ways to solve any given problem in CSS, and in my case, I tend to use the + selector most often.

Thankfully in your case, you’re using the CMS and Webflow recently made it possible to target these types of elements within a Collection list—natively in the Designer:


Thanks to you both. I’ve selected mikey’s second reply as the answer as it also solves the problem without having to use custom code.


This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.