html＆amp; CSS响应式网格问题，使用浏览器检查工具时的比例完美，窗口不扩展

Question

我正在尝试创建一个具有三个相等大小的正方形的设计。

我想要的是，在分辨率高于991px宽度的屏幕上，旁边有3个正方形。

如果用户屏幕宽度低于991px，高于767px，我希望他或她看到每行两个正方形：

“希望他或她看到每行的一张图像。

到目前为止，我已经取得了成就。 由于我的结果是：

900px屏幕宽度以上

上方767px ScreenWidth

以及767px屏幕宽度以下

现在我的问题开始的地方。 我已经使用Firefox检查工具对此进行了测试。缩放屏幕分辨率并调整我的HTML＆amp; CSS代码。 而且看起来很完美。

但是，当我试图在窗户浏览屏幕上检查结果时，突然间缩放了。 而且我几乎彼此之间几乎有两个屏幕。但是右边的一个空字段。 如您在下面的屏幕上所见：

我的代码： 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

    .home-grid {
    background-color: #0f0f0f;
    display: inline-block;
    padding: 0px;
    }
    .grid-house {
        display: block;
        width: 33.02vw;
        height: 33.02vw;
    }
    .grid-house .house-grid-content {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        height: 100%;
        padding-left: 20%;
        padding-right: 20%;
        position: relative;
        z-index: 999;
    }
    @media only screen and (max-width: 991px) {
        .grid-house {
            width: 50vw;
            height: 50vw;
        }
    }
    @media only screen and (max-width: 767px) {
        .grid-house {
            width: 100vw;
            height: 100vw;
        }
    }

编辑： 我的头部设置带有视口元标记。

tacoshy的解决方案，非常感谢

Answer 1

让我感到困惑的是，您会谈论abotu 网格，但从未真正使用网格，而是inline-block。使用实际的CSS-GRID或flexbox将更容易IMHO。

对于bot，css-grid和flexbox我删除了.grid-house的CSS。尤其是将硬编码为正方形的高度和宽度设置为无效。使用faction-ratio -property或此方法。

在此Methode中使用CSS-GRID

在容器中使用display-grid，并应用3列与`grid-template-columns：repot：repot（3，1fr）;等于每个列的空间（作为1个分数）。在Medi查询中，我以相同的方式将列设置为2或1列。

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-house {
  aspect-ratio: 1 / 1;
}

.grid-house .house-grid-content {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
  padding-left: 20%;
  padding-right: 20%;
  position: relative;
  z-index: 999;
}

@media only screen and (max-width: 991px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .home-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}


/* for visualisation purpose only */
.grid-house:nth-child(1) {
  background-color: blue;
}
.grid-house:nth-child(2) {
  background-color: red;
}
.grid-house:nth-child(3) {
  background-color: yellow;
}

<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>

使用Flexbox：

只需使用显示：Flex;在容器上，然后将其与flex-wrap：wrap组合。然后将.grid-house的宽度设置为calc（100％/3）（对于像素精度）或50％或<代码> 100％带有更有用的功能，然后vw/vh将容器宽度而不是屏幕宽度。使用vw是导致令人讨厌的oevrflow并发行的原因。

.home-grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-house {
  aspect-ratio: 1 / 1;
  width: calc(100% / 3);
}

.grid-house .house-grid-content {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
  padding-left: 20%;
  padding-right: 20%;
  position: relative;
  z-index: 999;
}

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

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


/* for visualisation purpose only */
.grid-house:nth-child(1) {
  background-color: blue;
}
.grid-house:nth-child(2) {
  background-color: red;
}
.grid-house:nth-child(3) {
  background-color: yellow;
}

<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>