Customize container column width with CSS

[Jarvis]

While Glide’s container feature is very helpful, it still lacks a lot of functionality that we might potentially need, such as having containers within containers, having more than 4 columns, or changing the width of columns. I was hoping the last one - changing the width of columns - is possible with CSS. Since I’m not good at coding, I searched online for something similar but couldn’t find anything.

The closest I found was this, but this is for collections rather than containers: CSS Library

Is there any way to change the width of my container? I wan to achieve a similar effect to this image

[Himaladin]

@Jarvis

having more than 4 columns

Container Glide only allows a maximum of 4 columns. If you want more, consider using a new table component.

[Jarvis]

Yeah that’s alright actually. 4 columns are working fine for me now. What I’d like is to change the proportional width of these 4 columns with CSS, so instead of them being all 25%, I’d like to have one 40%, and the remaining three 20% each, for example.

[Himaladin]

OK. Here is the code, you can try setting the minimum pixels and fraction. Always pay attention to the results in mobile display.

#page-root .grid-container .fourColumns {
grid-template-columns: minmax(100px, 3fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);
}

grid-container is the class name

[Jarvis]

Wow, thanks a lot! I tried it but I’m probably doing something wrong, because it’s not taking any effect

My CSS panel:

The custom class

What I’m seeing in the Layout:

[Himaladin]

You have to turn off the “Use compiled css” button (Glide or custom css implementation).
Besides that, turn on Preview CSS to see the effect in the builder

[Jarvis]

Great, that worked! Although you’re right that in mobile it could become a mess. I’m guessing we can’t restrict the CSS to only desktops?

[Himaladin]

Don’t you want both displays to be the same?
If you want, you should try to arrange the fractions too.

[Jarvis]

In mobile, the default 4-column automatically turns into a single-column layout which works better. Here’s what it looks like after the CSS code:

Here’s what it looks without the CSS code (preferred):

I’m trying Chat GPT to help, but the code it gave me was this, which doesn’t work though
@media (min-width: 768px) {
#page-root .grid-container .fourColumns {
grid-template-columns: minmax(100px, 3fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) !important;
}
}

[Himaladin]

OK. If you want the effect only for desktop, then add to this section: #page-root:not(:has(.mobile-layer)) .grid-container .fourColumns

#page-root:not(:has(.mobile-layer)) .grid-container .fourColumns {
grid-template-columns: minmax(100px, 3fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);
}

[Jarvis]

This works perfectly! Much thanks

[Jarvis]

By any chance would you happen to know the classes for the various 2-column layouts? I was able to figure out the full container and 3-column container classes, but I’m having trouble finding the classes for the 2-column ones.

Edit: nevermind, I figured it out:
oneToOne
oneToTwo
twoToOne