技术求助：2x2图片网格意外重复4次，求原因排查

问题排查方向 #

• 确认HTML结构：检查页面中是否存在多份<div class="gridContainer">模块，可能是手动复制、框架循环（如React map、PHP循环）重复渲染导致。
• 排查CSS干扰：检查是否有其他CSS规则（如伪元素::before/::after）意外生成重复内容，或容器样式被错误复用。
• 检查后端渲染逻辑：如果是动态页面，确认服务器端代码是否循环输出了多次该图片网格模块。
• 清除浏览器缓存：强制刷新页面（Ctrl+F5），排除旧缓存代码导致的重复显示。

2x2网格布局修正代码 #

当前代码未指定网格列数，会导致布局不符合预期，以下是修正后的完整代码：

.gridContainer
{
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 明确设置2列，每列等宽 */
    grid-gap: 10px;
}

.gridContainer img
{
    max-width: 100%; /* 适配网格列宽，替代固定width="100%" */
    height: auto;
}

<div class="gridContainer">
  <img src="cans.jpg">
  <img src="aesthetic.jpg">
  <img src="ts-cook.jpg">
  <img src="ts-bowl.jpg">
</div>

内容的提问来源于stack exchange，提问作者Nicholas Williams