How to maintain the current row structure while arranging cards of varying heights? [duplicate]

Stack Overflow community!

I need assistance with placing product cards on a webpage. They should be arranged haphazardly, as shown in the attached layout, and their height may vary. Here's the layout I'm attempting to implement:

image - grid i want

what i have now

The product cards are within div elements with the class row, and this structure needs to be maintained due to the functionality of the "Load More" button, which dynamically loads and appends new cards into this structure.

Here's a snippet of the current HTML/CSS:

<div class="row"><!-- Product cards --><div class="card">1</div><div class="card">2</div><!-- Other cards... --></div>

.row {  /* Styles for the row */}.card {  /* Styles for the product cards */}

The goal is to arrange the cards as per the layout without altering the current div.row structure and allowing for varying heights of the cards. I am looking for ways to use CSS or JavaScript to achieve this goal.

I would greatly appreciate any suggestions or code examples!