Как увеличить родительскую высоту во вложенных CSS-сетках при расширении дочерних элементов

Question

У меня есть несколько вложенных CSS-сеток, где дочерние сетки расширяются за пределы родительской сетки.

Я удалил свой код до минимума, чтобы я мог видеть причину этого, но я не смог определить, где находится код проблемы или как заставить родительский рост реагировать на детей.

Я подозреваю, что моя главная проблема находится где-то здесь в этом коде, но вы можете увидеть проблему здесь https://jsfiddle.net/bgp7fzjm/2/

.grid-container {
  background-color: #080808;
  display: grid;
  grid-template-areas:
  "site-card"
  "project-card";
  justify-content: space-evenly;
  max-width: 100%;
  height: 100%;
}

#site-card {
  grid-area: site-card;
  display: grid;
  grid-template-areas:
  "site1"
  "site2"
  "site3";
  grid-column-gap: 4%;
  grid-row-gap: 4%;
}

В идеале родительская сетка расширяется за счет дочерних элементов, и дочерние элементы не переполняют цвет фона.

Answer 1

Проблема в том, что вы используете процент для grid-row-gap. Это не будет работать, если вы не установите конкретную высоту для родительской оболочки grid. Проценты (в данном случае) зависят от размеров родителя. Потому что, если нет, 4% чего? Сетка не будет знать.

Если вы не хотите устанавливать конкретную высоту, вы можете использовать px для разрыва.

.grid-container {
  background-color: #080808;
  display: grid;
  grid-template-areas: "site-card" "project-card";
  justify-content: space-evenly;
  max-width: 100%;
  height: auto;
}

#site-card {
  grid-area: site-card;
  display: grid;
  grid-template-areas: "site1" "site2" "site3";
  grid-column-gap: 4%;
  grid-row-gap: 10px;
}

#site1 {
  grid-area: site1;
}

#site2 {
  grid-area: site2;
}

#site3 {
  grid-area: site3;
}

.card {
  width: 90px;
  height: 90px;
  background-color: red;
  max-width: 100%;
}

<main>
  <div class="grid-container">
    <section id="site-card">
      <div class="card" id="site1">


      </div>
      <div class="card" id="site2">


      </div>
      <div class="card" id="site3">


      </div>
    </section>
  </div>
</main>