Почему элементы сетки переполняют контейнер сетки?

Question

Я хочу, чтобы мой контейнер сетки автоматически подстраивался под его содержимое. Его родитель также имеет высоту авто. В настоящее время сетка переполняется своим содержимым. У него такое поведение:

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

Я пытался использовать grid-template-columns, но это влияло только на первую строку, поэтому попробовал использовать grid-auto-columns и он изменяет размеры всех строк, но все равно переполняется.

Я ожидаю, что если я добавлю еще одну строку, контейнер сетки будет изменен в соответствии с его содержимым.

#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 естественным образом расширяется для размещения элементов сетки вместе с процентными зазорами сетки.