Shopify product grid - don't align the rows in 1 line

Store Design
1

I have a regular Shopify collection product grid that looks like this:

Current Product Grid

I’d like to make it look more this feed (e.g. Pinterest-style grid, eliminating the white space under product 1, 2, 4 and 5):

Desired Product Grid Alignment

How can I do that? I’m using the Taste theme, this is the link to my collection page: https://ragtag.style/collections/tag-hips-curves

Below my grid css right now:

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}
@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
  height: flex;
}
2

Fair bit of work here, you’d have to remove flex for grid.

Here is a codepen that achieves it

https://codepen.io/MAB015/pen/MBaRXO

You might be best off hiring a developer to do this if you aren’t familiar with CSS grid.