# Customize container column width with CSS

**URL:** <https://community.glideapps.com/t/customize-container-column-width-with-css/74636>\
**Category:** Ask for Help\
**Created:** [July 5, 2024, 1:55am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636 "2024-07-05T01:55:59Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 5, 2024, 1:55am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/1 "2024-07-05T01:55:59Z")

</div>

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](https://css-library.glide.page/dl/library/s/8836b3/r/0nNeDHmWQqCBzDozy4cV3A)

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

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/8/a8f888d0a01fea448973e65fcb189773a225c7f6.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 5, 2024, 2:48am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/2 "2024-07-05T02:48:31Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 5, 2024, 10:39am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/3 "2024-07-05T10:39:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 5, 2024, 10:44am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/4 "2024-07-05T10:44:06Z")

</div>

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

```auto
#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

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 5, 2024, 11:06am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/5 "2024-07-05T11:06:59Z")

</div>

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

My CSS panel:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/7/97f7e36512c25f61accf0db54bf5c2505c59ebf6.png)

The custom class  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cbcbe8d4282dea66fbf67a3c3c15c90718e4a99f.png)

What I’m seeing in the Layout:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/78cbbae8fb836f2d9755d5425965c2fa16314ad3.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 5, 2024, 11:13am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/6 "2024-07-05T11:13:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 5, 2024, 11:20am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/7 "2024-07-05T11:20:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 5, 2024, 11:23am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/8 "2024-07-05T11:23:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 5, 2024, 11:29am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/9 "2024-07-05T11:29:58Z")

</div>

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:

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a2fffb1bf680789252c8341f3194e09e49e9f395.png)

Here’s what it looks without the CSS code (preferred):  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cd3d6075b3586725458a39d78526ad0da659dcc7.png)

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 5, 2024, 11:33am UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/10 "2024-07-05T11:33:23Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 5, 2024, 1:41pm UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/11 "2024-07-05T13:41:43Z")

</div>

This works perfectly! Much thanks

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [July 7, 2024, 11:55pm UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/12 "2024-07-07T23:55:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [July 14, 2024, 11:56pm UTC](https://community.glideapps.com/t/customize-container-column-width-with-css/74636/13 "2024-07-14T23:56:03Z")

</div>

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