# Bento Box (or Masonry Grid) Collection Design

**URL:** <https://community.glideapps.com/t/bento-box-or-masonry-grid-collection-design/76975>\
**Category:** Community Resources\
**Tags:** custom-css\
**Created:** [October 10, 2024, 8:11am UTC](https://community.glideapps.com/t/bento-box-or-masonry-grid-collection-design/76975 "2024-10-10T08:11:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [October 10, 2024, 8:11am UTC](https://community.glideapps.com/t/bento-box-or-masonry-grid-collection-design/76975/1 "2024-10-10T08:11:15Z")

</div>

Very cool code for spicing up your collection layout, created by @Himaladin .  
Apply class name masonry-grid to your collection.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/4/a4da2068cdc33ec57428bc15d587117a6892e2b4.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/3/93b0a2ed23b80199fb7ce7d2cd382376b01ca9bb.jpeg)

```auto
/* desktop - column number */
.masonry-grid [data-testid="vertical-collection-container"] {
  display: block;
  column-count: 3; 
  column-gap: 10px;
}

/* mobile - number of columns */
.mobile-layer .masonry-grid [data-testid="vertical-collection-container"] {
column-count: 2;
}

/* Row Gap */
.masonry-grid [data-testid="cc-card"] {
  margin-bottom: 10px;
}
/* Remove default aspect ratio */
.masonry-grid [data-testid="card-image"] {
  padding-top: 0; 
}

.masonry-grid [data-testid="card-image"] > div {
  position: static; 
}

```

---

<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:** [October 10, 2024, 4:05pm UTC](https://community.glideapps.com/t/bento-box-or-masonry-grid-collection-design/76975/2 "2024-10-10T16:05:23Z")

</div>

I think the following section of code can also be removed, as it has no effect anymore.

> [@Sekayi\_Liburd](#):
>
> ```auto
> .masonry-grid img {
> object-fit: contain;
> }
> 
> ```