如何让两个Grid重叠对齐并响应窗口尺寸变化？

问题出在这几个地方：

• 衬衫图片没设尺寸约束，默认按原图大小显示，不会跟着容器缩放
• .grid-container未启用Grid布局，导致衬衫和艺术图区块上下堆叠，整体布局也没按70vw的预期生效
• .art的负margin直接打乱了布局逻辑，破坏了Grid的排版规则
• object-fit用错了对象：这个属性是给图片/视频元素用的，不是Grid容器

直接调整以下几点就能解决：

1. 给.grid-container添加Grid布局，实现衬衫和艺术图的横向排列与居中对齐
2. 给所有图片添加响应式尺寸规则，确保随容器缩放
3. 修正.gridandtitle的定位方式，实现整体在视口居中，同时保持70vw宽度
4. 移除不合理的负margin，用Grid间距控制元素位置

完整修复代码 #

CSS #

/* 整体容器：占视口70%宽度，绝对定位完美居中 */
.gridandtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  height: auto; /* 高度自适应内容，不要固定死 */
}

/* 主Grid容器：横向均分衬衫和艺术图区块 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; /* 替代旧的grid-column-gap，语法更通用 */
  align-items: center;
}

/* 内部图片网格：3列均分 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* 响应式图片核心规则：填满容器，保持比例不拉伸 */
.grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 移除原有的负margin，避免布局混乱 */
.art {
  /* 需调整位置时，用Grid的align-self或margin控制，不要用负margin */
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <style>
        /* 将上述CSS代码放置此处或外部样式表 */
        .gridandtitle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 70vw;
          height: auto;
        }
        .grid-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          align-items: center;
        }
        .grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
        }
        .grid img {
          width: 100%;
          height: auto;
          object-fit: cover;
        }
    </style>
</head>
<body>
<div class="gridandtitle">
 <div class="grid-container">
    <div class="shirt">
        <div class="grid grid-1">
            <img src="https://i.imgur.com/oS8QWPI.png">
            <img src="https://i.imgur.com/oS8QWPI.png">
            <img src="https://i.imgur.com/oS8QWPI.png">
        </div>
    </div>
 
    <div class="art">
        <div class="grid grid-2">
            <img src="https://i.imgur.com/jeNzULX.png">
            <img src="https://i.imgur.com/jeNzULX.png">
            <img src="https://i.imgur.com/jeNzULX.png">
        </div>
    </div>
 </div>  
</div>
</body>
</html>

关键细节说明 #

• 用transform: translate(-50%, -50%)实现绝对定位元素的完美居中，不会因元素自身尺寸偏移
• width:100%+height:auto是图片响应式的核心规则，确保图片随容器宽度自动缩放且保持比例
• repeat(3,1fr)是Grid的简洁写法，与1fr 1fr 1fr效果一致
• 移除了原代码中多余的IE前缀，当前主流浏览器均支持标准Grid语法，无需兼容旧版本

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