How to dynamically display cards in a grid - html

Question

I am designing the UI for a web app which will dynamically display data from my database in form of cards and will be arranged in a grid. For testing purposes I have put two cards , one after the other , however, only the first one is being displayed.
How can I get them to be displayed in a 3 column row after which if there are more than 3, they overflow to the next row dynamically?
<div class="container_grid">
<div class="product-card" style="margin: 1rem">
<div class="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div class="view-details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
<div class="product-card" style="margin: 1rem">
<div class="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div class="view-details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
Link to the full JFiddle: https://jsfiddle.net/5yoerguh/3/
What am I doing wrong?

Answer 1

Both are being displayed if you check the console both div class='product-card' is there.
The problem is in the css your class .propduct-card is displayed with position:absolute;
.product-card {
width: 20rem;
max-width: 95%;
width: 325px;
height: 490px;
--> take this out /* position: absolute; */
overflow: hidden;
}
Now you will see both items