# CSS to improve List Collection → Card Style

**URL:** <https://community.glideapps.com/t/css-to-improve-list-collection-card-style/86498>\
**Category:** Community Resources\
**Tags:** custom-css\
**Created:** [February 25, 2026, 8:41pm UTC](https://community.glideapps.com/t/css-to-improve-list-collection-card-style/86498 "2026-02-25T20:41:37Z")\
**Posts on this page:** 2\
**Page:** 1

<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:** [February 25, 2026, 8:41pm UTC](https://community.glideapps.com/t/css-to-improve-list-collection-card-style/86498/1 "2026-02-25T20:41:37Z")

</div>

I always wished the “card” style of list collections had truly separated cards per list item.

I discovered that if add a css class (eg. cardlist) and custom styling (below) to your list collection, you can achieve the look pretty easily!

```auto
.cardlist [data-testid*="collection-item"]{
margin-bottom: 10px;
border-radius: 10px;
}

```

Before and after:

![CleanShot 2026-02-25 at 15.35.47](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/85948705fc94c0adf7711b1cb7ed100914f5f3a8.gif)

---

<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:** [February 28, 2026, 11:39am UTC](https://community.glideapps.com/t/css-to-improve-list-collection-card-style/86498/2 "2026-02-28T11:39:11Z")

</div>

🤩 Little change make it beautiful