Streaming live at 10am (PST)

Ability to add 0.5fr column spacing to a grid?

I design a lot of custom grids using Webflow. It’s amazing for this - basically print layouts for the web!

It’s my first time using collections though. All I want is to add 0.5fr spacing in the grid. I usually just do this by making the spacing 0px and adding the columns at that size. Like this:

This example has three separate collection testimonials so I can do this.

I want the same spacing below for all the products. This would be too hard to manually add products, and individually fill in the info.

When I do this in Webflow it looks like this:

Is there a trick to having it skip columns? I thought I could put 0.5FR in the column spacing but that’s not allowed for some reason. Maybe it can be hacked with code some how? This is just at 48px but isn’t fluid responsive and doesn’t match up with any of the other grids.

Let me know. I didn’t think I would have to submit a read-only site since it can or cannot be done. I can submit one if someone thinks they now a trick though! Let me know… I would love to figure out this one small thing bugging me right now.

Cheers!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I really find these forums extremely unhelpful. The last 3-4 questions I’ve had no one respond. I’m finding it pretty pointless now.

I figured my problem out, and hope that it helps someone in the future if they want to do the same thing.

There are 17.5fr in the grid above. The 0.5fr is the spacing. Webflow doesn’t allow fr for the gap. They don’t even allow % either! So I had to do the math to get 2.8571429% to match the 0.5fr gap.

I’m doing all of this so the grid is truly fluid and aligns perfectly (fixed amounts for gaps aren’t truly responsive).

I had to add this custom code. You can use something similar calling whatever .grid you use:

.grid-category_products {
grid-column-gap: 2.8571429% !important;
}

If anyone finds this helpful, or has any questions respond to me on here and I’ll help where I can.