页面调整大小时右侧Grid容器未随页面自适应移动问题

页面某区域左侧为文本内容，右侧是Grid布局容器。当页面宽度缩小时，Grid容器不会随页面宽度变化自适应移动，保持静止状态被页面边缘遮挡，特定宽度下还会出现X轴溢出。

原始HTML代码 #

<!-- Third Section -->

<div class="index-third">
  <div class="index-third-text">
    <p id="heading">How We Can Help You</p>
    <h4 id="subheading">Our Services</h4>
    <hr>
    <h5 id="body">The services we offer are to ensure seamless consultation <br> processes. These features intend to provide necessary <br> and effective remote medical support to those in need. <br> <br> Click on the buttons to learn more!</h5>
  </div>
  <div class="index-third-grid">
    <div class="item item-1">
      <i class="fa-solid fa-magnifying-glass"></i>
      <p>Search</p>
    </div>
    <div class="item item-2">
      <i class="fa-solid fa-check-to-slot"></i>
      <p>Consult</p>
    </div>
    <div class="item item-3">
      <i class="fa-solid fa-comment"></i>
      <p>Chat</p>
    </div>
    <div class="item item-4">
      <i class="fa-solid fa-list"></i>
      <p>Diagnose</p>
    </div>
    <div class="item item-5">
      <i class="fa-solid fa-bars-progress"></i>
      <p>Manage</p>
    </div>
    <div class="item item-6">
      <i class="fa-solid fa-star"></i>
      <p>Review</p>
    </div>
  </div>
</div>

原始CSS代码 #

.item {
        text-align: center;
        background-color: #fff;
        padding: 15px;
        width: 160px;
        height: 100px;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0 1px 1px black;
      }

      .item p {
        margin-top: 20px;
      }

      .index-third-grid {
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: repeat(3, 100px);
        row-gap: 2em;
        column-gap: 5em;
        margin: 100px;
        margin-left: 750px;
        color: #704a1b;
        font-size: 20px;
      }

      .index-third-text p {
        font-size: 25px;
        color: #704a1b;
        margin-left: 100px;
        position: absolute;
      }

      .index-third-text h4 {
        font-size: 35px;
        color: #614124;
        margin-left: 100px;
        margin-top: 40px;
        position: absolute;
      }

      .index-third-text h5 {
        font-size: 15px;
        color: #614124;
        margin-left: 130px;
        margin-top: 120px;
        position: absolute;
      }

      .index-third-text hr {
        font-size: 35px;
        border: 0.5px solid #614124;
        width: 0px;
        height: 120px;
        margin-left: 100px;
        margin-top: 110px;
        position: absolute;
      }

问题根源 #

• Grid容器位置固定：.index-third-grid设置了margin-left:750px固定值，导致容器位置不随屏幕宽度变化，窄屏时直接被挤出可视区域。
• 文本元素脱离文档流：所有文本元素都用position:absolute，脱离正常文档流导致父容器.index-third高度塌陷，Grid容器布局参考混乱。
• Grid布局无响应式：grid-template-columns: repeat(3, 100px)固定列数和列宽，窄屏时无法自动换行，引发横向溢出。

修复方案 #

修改CSS代码如下，实现响应式布局：

/* 重置全局默认样式，避免默认margin/padding干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.item {
  text-align: center;
  background-color: #fff;
  padding: 15px;
  width: 160px;
  height: 100px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 1px 1px black;
}

.item p {
  margin-top: 20px;
}

/* 父容器用Flex实现左右布局，自适应宽度 */
.index-third {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 50px 20px;
  gap: 50px;
}

.index-third-text {
  flex: 1;
  min-width: 300px; /* 文本区域最小宽度，避免过窄 */
  padding-left: 80px;
  position: relative; /* 作为内部绝对定位元素的参考 */
}

.index-third-text p#heading {
  font-size: 25px;
  color: #704a1b;
}

.index-third-text h4#subheading {
  font-size: 35px;
  color: #614124;
  margin-top: 10px;
}

.index-third-text hr {
  border: 0.5px solid #614124;
  width: 0;
  height: 120px;
  position: absolute;
  left: 50px;
  top: 60px;
}

.index-third-text h5#body {
  font-size: 15px;
  color: #614124;
  margin-top: 20px;
  padding-left: 30px;
  line-height: 1.6;
}

.index-third-grid {
  flex: 1;
  min-width: 300px; /* Grid区域最小宽度 */
  display: grid;
  /* 自动适配列数，列宽最小160px，剩余空间平分 */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2em; /* 统一行列间距，替代row-gap/column-gap */
  color: #704a1b;
  font-size: 20px;
  margin-top: 20px;
}

修复说明 #

1. 父容器用Flex布局：.index-third设置为display:flex，让文本和Grid容器在同一行排列，flex-wrap:wrap保证窄屏时自动换行。
2. 移除固定margin和冗余绝对定位：去掉Grid容器的margin-left:750px，仅保留hr的绝对定位（基于父容器的position:relative），其余文本元素用正常文档流布局。
3. 响应式Grid列：用repeat(auto-fit, minmax(160px, 1fr))实现自动适配列数，屏幕宽度足够时显示3列，窄屏时自动减少列数并换行，避免横向溢出。
4. 添加最小宽度：给文本和Grid区域设置min-width，保证内容不会被压缩到无法阅读。

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