# Custom Collection (Container) Background to Match Container component background

**URL:** <https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708>\
**Category:** Feature Requests\
**Tags:** collections\
**Created:** [December 12, 2025, 1:53pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708 "2025-12-12T13:53:30Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sean\_Page](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sean_page/32/77424_2.png) [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\
**Post date:** [December 12, 2025, 1:53pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/1 "2025-12-12T13:53:30Z")

</div>

When you use a Container, the Background can be set to one of several things like Card or Accent. This can help clearly define areas or blocks on a page.

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

However, when you use a Custom Collection, you are only able to define “Card” or “None” on the background, but then it is just assigned to the background of each element in the collection, not the overall Container of that Custom Collection.

Here is what a Container with Card background and a Card Collection inside of it.

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

Here is the Custom Collection where the overall container (background) isn’t shown, but the background is there for each element inside.

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

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 12, 2025, 2:36pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/2 "2025-12-12T14:36:21Z")

</div>

Feel free to vote on your own post!

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 12, 2025, 2:37pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/3 "2025-12-12T14:37:05Z")

</div>

There are way with CSS to workaround this, but I agree that there must be the options.

---

<div class="post-metadata">

**Author:** ![Sean\_Page](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sean_page/32/77424_2.png) [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\
**Post date:** [December 12, 2025, 2:54pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/4 "2025-12-12T14:54:32Z")

</div>

Thanks @MaximeBaker, that is a valid point as with much of what we can do, but dealing with custom styling just to get it to look like the other built in components seems like a lot of work for basic consistency.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [December 12, 2025, 2:54pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/5 "2025-12-12T14:54:57Z")

</div>

I agree 100%.  
+1

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 12, 2025, 3:07pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/6 "2025-12-12T15:07:04Z")

</div>

This has been a thorn in my side since custom collections were released a few years ago. I hate the lack of design consistency.

---

<div class="post-metadata">

**Author:** ![Sean\_Page](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sean_page/32/77424_2.png) [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\
**Post date:** [December 12, 2025, 3:18pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/7 "2025-12-12T15:18:27Z")

</div>

Do you custom style it, or just deal with it?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 12, 2025, 6:11pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/8 "2025-12-12T18:11:22Z")

</div>

I just deal with it. I try to keep CSS to a minimum and only use it when necessary. In my case I ultimately went without a background color everywhere else to keep consistency. I have sections where I use standard collections inside a container and other sections where I need to use a custom collection which can’t be placed in a container. I like using color backgrounds to help draw the eye to the important information. Otherwise there is so much white and grey that everything blends together in my opinion. Switching to a dark theme helps in some cases, but still presents some visual challenges.

Since a custom collection is essentially a repeating container, it only makes sense to me that it should have the same styling options as a container.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 14, 2025, 3:48am UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/9 "2025-12-14T03:48:02Z")

</div>

Agreed! The custom collection hasn’t had anny significant updates since its inception despite our many feature requests.

Maybe one day. Keep the feature request coming!

---

<div class="post-metadata">

**Author:** ![Sean\_Page](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sean_page/32/77424_2.png) [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\
**Post date:** [June 11, 2026, 2:07pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/10 "2026-06-11T14:07:43Z")

</div>

Would you have an example of css to make this happen? I have been chasing it around but can’t quite to seem to get it to work right. I get it close, but it seems that the margin of the overall container tends to be different than other things on the page.

The Blue here is what I am trying to get aligned:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/3/c36add340f5a55c60c81b8deaf2ad7cdc7d2d9bf.jpeg)

Here is what I am using thus far:  
.lkBvDn.Custom-Card{  
background:blue;  
margin:8 auto;  
border:solid 2px black;  
border-radius:15px;  
max-width:95vw; → I can adjust this down enough to get it be narrower, but it doesn’t want to scale with everything else so it ends up being different as well.  
padding:1.5rem;  
}

I do also have some overall “wide” styling applied as well:  
#main-root div[class\*=“justify-center”] {  
–container-x-pad: 25px;  
max-width: 95vw;  
}

#page-root div[class\*=“justify-center”] {  
–container-x-pad: 25px;  
max-width: 95vw;  
}

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 11, 2026, 7:22pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/11 "2026-06-11T19:22:56Z")

</div>

Something like this?

Top is card container with grid collection. Bottom is custom collection with Grid Layout + Card Style.

 ![CleanShot 2026-06-11 at 15.21.43@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/9540df08bcbd6aecae862f806bc4ab39acd3716e.jpeg)

```auto
.custom-card {
background-color: var(--gv-accent);
margin: 30px;
border-radius: 15px;
width: auto;
}

```

Only issue is that mobile adds additional margin, so `margin: 30px` might need some `calc` tweaking or the like.

---

<div class="post-metadata">

**Author:** ![Sean\_Page](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sean_page/32/77424_2.png) [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\
**Post date:** [June 11, 2026, 8:21pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/12 "2026-06-11T20:21:19Z")

</div>

Wow, all I needed was “auto…”

Thank you @Robert_Petitto!!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 11, 2026, 9:31pm UTC](https://community.glideapps.com/t/custom-collection-container-background-to-match-container-component-background/85708/13 "2026-06-11T21:31:57Z")

</div>

Happy to help!