html - 为什么网格项会溢出网格容器？

Question

我希望我的网格容器能够自动调整到它所拥有的内容。它的 parent 也有汽车的高度。此时，网格正被其内容溢出。它有这样的行为:

xxxxxxxxxxcontainerxxxxxxxxxx   _|         |        |        |    ||         |        |        |    ||_________|________|________|    ||         |        |        |    ||         |        |        |    ||_________|________|________|    |---------Grid items|         |        |        |    ||         |        |        |    ||_________|________|________|    ||xxxxxxxxx|xxxxxxxx|xxxxxxxx|    | |         |        |        |    ||_________|________|________|   _|

I've tried to use the grid-template-columns, but it was only affecting the first row, so tried using grid-auto-columns and it resizes all the rows, but still overflowing.

I expect that if I add another row, the grid container will be resized to its content.

#allyes {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url('../img/fondo-laptop.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#allyes #allyesLogos {
  height: auto;
  margin-left: auto;
  width: 60%;
  padding: 2% 3%;
  background: rgba(255, 255, 255, 0.6);
}

#allyes #allyesTitle {
  font-size: var(--bigTitleSize);
  font-family: var(--titleFamily);
  color: white;
  text-transform: uppercase;
  margin-bottom: 5vh;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.6);
}

#allyesLogos .logosTable {
  width: 100%;
  height: auto;
  display: grid;
  margin-bottom: 5vh;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 70px;
  align-items: center;
  justify-items: center;
  grid-gap: 2% 3%;
}

<section id="allyes">
  <div id="allyesLogos">
    <h1 id="allyesTitle">alianzas comericales</h1>
    <div class="logosTable">
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/4yousee.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/benq.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/bright-sign.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/dell.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/dynascan.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/elo.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/fortinet.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/glassapps.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/hisense.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/iadea.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/lenovo.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/LG.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/nec.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/panasonic.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/samsung.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/screengoo.webp'?>" alt="ally"></div>
      <div class='allyLogo'><img src="<?php echo $httpProtocol.$host.$url.'img/logos-alianzas/sharp.webp'?>" alt="ally"></div>
    </div>
  </div>
</section>

Answer 1

这是问题的根源:

grid-gap: 2% 3%

百分比网格间隙似乎在渲染引擎设置容器尺寸后被纳入布局。

这也可能是一个问题，百分比是基于什么(容器高度？行高？其他？)。

无论哪种方式，网格间隙的百分比值都会导致网格项溢出网格容器。

尝试使用不同的长度单位，例如 vh、px 或 em。它们似乎工作正常。

在下面的演示中，我使用了 grid-gap: 2vh 3vh。

#allyes {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url('../img/fondo-laptop.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#allyes #allyesLogos {
  height: auto;
  margin-left: auto;
  width: 60%;
  padding: 2% 3%;
  background: rgba(255, 255, 255, 0.6);
}

#allyes #allyesTitle {
  font-size: var(--bigTitleSize);
  font-family: var(--titleFamily);
  color: white;
  text-transform: uppercase;
  margin-bottom: 5vh;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.6);
}

#allyesLogos .logosTable {
  width: 100%;
  height: auto;
  display: grid;
  margin-bottom: 5vh;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 70px;
  align-items: center;
  justify-items: center;
  /* grid-gap: 2% 3%; */
    grid-gap: 2vh 3vh; /* adjustment */
  border: 1px solid red; /* demo */
}

<section id="allyes">
  <div id="allyesLogos">
    <h1 id="allyesTitle">alianzas comericales</h1>
    <div class="logosTable">
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
      <div class='allyLogo'><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></div>
    </div>
  </div>
</section>

另请注意:问题中描述的问题在 Chrome 和 Firefox 中存在，但在 Edge 中不存在。 Edge 中的网格容器会自然扩展以容纳网格项以及百分比网格间隙。