如何在网格中动态显示卡片

Question

我正在为一个Web应用程序设计UI，该应用程序将以卡片的形式动态显示数据库中的数据，并将排列在网格中。
出于测试目的，我放了两张卡，一张接一张，但是，只显示第一张。
如何让它们显示在 3 列行中，之后如果超过 3 列，它们会动态溢出到下一行？

<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>

链接到完整的 JFiddle： https://jsfiddle.net/5yoerguh/3/
我做错了什么？

Answer 1

如果您检查控制台，则两者都会显示div class='product-card'。 问题出在 css 中，您的类 .propduct-card 显示的位置：绝对;

.product-card {
width: 20rem;
max-width: 95%;
width: 325px;
height: 490px;
--> take this out   /* position: absolute; */
overflow: hidden;
}

现在您将看到这两个项目