嘿，我瞅了你的代码，问题根源出在卡片的定位方式上！你给.product-card设置了position: absolute，这会让所有卡片都脱离正常文档流，挤在同一个位置重叠起来——所以你只能看到最上面的第一张卡片。

要实现你想要的「每行3列、自动换行」的网格布局，用CSS Grid是最直接的方案，我帮你调整一下代码：

第一步：修正容器的Grid布局 #

把.container_grid的CSS改成这样，让它成为一个网格容器：

.container_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 强制每行3列，每列宽度均等 */
  gap: 1rem; /* 卡片之间的间距，代替你加在卡片上的inline margin */
  padding: 1rem; /* 给容器加个内边距，避免卡片贴边 */
}

第二步：调整卡片的样式 #

去掉卡片上的position: absolute（这是重叠的元凶），同时让卡片自适应网格列的宽度：

.product-card {
  width: 100%; /* 让卡片占满所在网格列的宽度 */
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  /* 保留你原来的其他样式，比如hover效果之类的 */
}

第三步：清理HTML的inline样式 #

把卡片上的style="margin: 1rem"删掉，因为我们已经用Grid的gap来控制间距了，这样布局更统一：

<div class="container_grid">
 <div class="product-card">
 <!-- 这里保留你原来的卡片内部内容 -->
 </div>
 <div class="product-card">
 <!-- 第二张卡片内容不变 -->
 </div>
 <!-- 多复制几张卡片测试，会自动换行到下一行哦！ -->
</div>

为啥这样改就生效了？ #

• display: grid让容器变成网格布局容器，能自动管理子元素的位置
• repeat(3, 1fr)表示创建3个宽度相等的列，1fr是「剩余空间等分」的单位，会自适应屏幕宽度
• gap属性帮我们统一控制卡片之间的水平/垂直间距，比给每个卡片加margin更省心
• 去掉position: absolute后，卡片回到正常文档流，Grid就能正确排列它们的位置啦

这样修改后，两张卡片会并排显示，当你添加第4张卡片时，它会自动换到下一行，完美实现你想要的效果～

内容的提问来源于stack exchange，提问作者Tim Mwaura