Question

我希望我的网格容器能够自动调整为其包含的内容。它的父级也具有自动高度。这时，网格正在被其内容溢出。它具有以下行为：

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

我尝试使用grid-template-columns，但是它只影响第一行，因此尝试使用grid-auto-columns并调整了所有行的大小，但是仍然溢出。

我希望如果添加另一行，则网格容器将被调整为其内容的大小。

find

#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%;
}

Answer 1

这是问题的根源：

grid-gap: 2% 3%

渲染引擎设置容器的尺寸后，似乎在布局中考虑了 percentage 网格间隙。

百分数是基于什么的（容器高度？行高度？其他？）也是一个问题。

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

尝试使用其他长度单位，例如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中的网格容器自然扩展以容纳网格项目以及网格间隙百分比。

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

1 个答案: