CMS with grid/flexbox - assymetry possible?

Hi,

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.
Thanks.

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:

.YOUR-COLUMN-CLASS + .YOUR-COLUMN-CLASS { 
  border-left: 1px solid red;
}

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

Thanks.
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
<style>
.list-item:last-child .content__c{
border-right: none;
}
</style>

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;
}

2 Likes

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:

3 Likes

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.

2 Likes

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