HTML & CSS响应式网格布局问题：调试工具缩放正常，窗口化浏览器缩放异常

你遇到的问题根源在于容器布局方式选择不当，以及块级元素的默认行为冲突。让我一步步拆解问题并给出修复方案：

核心问题点 #

• .home-grid 使用 display:inline-block：
  inline-block 容器的宽度由内容决定，还会受到 HTML 中空白字符（换行、空格）的影响，导致容器宽度计算异常，出现右侧空白；同时窗口缩放时，它无法自适应填满视口，容易触发媒体查询阈值提前生效。
• .grid-house 使用 display:block：
  块级元素默认独占一行，你能在调试工具中看到一行三个的效果，大概率是浏览器调试时的特殊渲染，或是你实际代码有遗漏样式（比如 float），但这个写法本身不符合预期，是布局不稳定的隐患。

修复后的代码 #

HTML（无需修改） #

<section class="home-grid">
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #1</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #2</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #3</h5>
    </div>
  </div>
</section>

CSS（修改布局核心逻辑） #

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

.home-grid {
  background-color: #0f0f0f;
  /* 改用flex布局，自动排列子元素并支持换行 */
  display: flex;
  flex-wrap: wrap;
  /* 让容器填满视口宽度，移除inline-block */
  width: 100%;
}

.grid-house {
  /* 作为flex子元素，无需设置display:block */
  /* flex: 0 0 百分比 确保子元素严格按设定宽度排列，不拉伸不收缩 */
  flex: 0 0 33.333%;
  height: 33.333vw;
}

.grid-house .house-grid-content {
  display: flex;
  justify-content: center;
  align-items: center; /* 单行flex容器用align-items实现垂直居中，替换无效的align-content */
  flex-direction: column;
  height: 100%;
  padding: 0 20%;
  position: relative;
  z-index: 999;
}

@media only screen and (max-width: 991px) {
  .grid-house {
    flex: 0 0 50%;
    height: 50vw;
  }
}

@media only screen and (max-width: 767px) {
  .grid-house {
    flex: 0 0 100%;
    height: 100vw;
  }
}

关键优化说明 #

1. Flex布局替代inline-block：flex天生适合响应式网格，自动处理子元素排列与换行，完全避免inline-block的空白字符问题和宽度计算异常。
2. 精确控制子元素宽度：flex:0 0 百分比的写法确保子元素严格按设定宽度显示，不会被拉伸或收缩。
3. 修复垂直居中逻辑：.house-grid-content是单行flex容器，用align-items:center才能实现内容垂直居中，之前的align-content对单行无效。
4. 添加box-sizing重置：确保padding不会额外增加元素宽度，避免布局溢出或错位。

修改后，无论是调试工具缩放还是窗口化浏览器调整，布局都会稳定按需求切换：>991px一行3个，767px-991px一行2个，<767px一行1个，且不会出现右侧空白。

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