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>

子项展开时如何在嵌套CSS网格中扩展父级高度

1 个答案: