Bento Box (or Masonry Grid) Collection Design

[Sekayi_Liburd]

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

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

[Himaladin]

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

@Sekayi_Liburd

.masonry-grid img {
  object-fit: contain;
}