网格自动行创建的网格行不会拉伸父级

Question

我正在尝试制作一个灵活的布局，以扩展添加的其他内容。

.parent {
  min-height: 500px;
  border: 1px solid;
  display: grid;
  grid-template-rows: 100px 1fr;
}

.child {
  display: grid;
  grid-auto-rows: 100%;
  border: 1px solid;
}


.header {
  background: yellow;
}

.content {
  background: rgba(255, 0, 0, 0.3);
  border: 1px dashed blue;
}

<div class="parent">
<div class="header"></div>
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

我要避免明确说明每个内容div的高度。如果我使用grid-auto-rows: 400px，它将为每个内容div创建一个高度为400px的行，并且父级拉伸将适合所有内容div。喜欢它。

但是如果我使用grid-auto-rows: 100%，它会创建一行高度等于孩子高度的100％的行，而父级不会拉伸。

有没有一种方法可以避免这种情况，并使父母成长为适合所有内容的方式，而无需明确说明孩子中每个人的身高？

Answer 1

  

但是如果我使用grid-auto-rows：100％，它会创建高度分别等于孩子身高100％的行，而父级不会拉伸。

比这更复杂。设置100%意味着该行将是child高度的100％，该高度被定义为父级内部的1fr，因此是400px。因此，每行的高度应为400px，并且由于child的高度也是400px，因此多于一行的行会产生溢出。

换句话说，您已定义一行的大小等于元素的高度，因此，多于一行肯定会造成溢出。

一种解决方法是考虑在1fr中使用grid-auto-rows，这将使所有content具有相同的高度，并且如果其中一个会长大，那么所有的{ child和parent元素。

为其中一个设置高度：

.parent {
  min-height: 500px;
  border: 1px solid;
  display: grid;
  grid-template-rows: 100px 1fr;
}

.child {
  display: grid;
  grid-auto-rows: 1fr;
  border: 1px solid;
}


.header {
  background: yellow;
}

.content {
  background: rgba(255, 0, 0, 0.3);
  border: 1px dashed blue;
}

.content:nth-child(2) {
  height:300px;
  background:red;
}

<div class="parent">
<div class="header"></div>
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

添加内容：

.parent {
  min-height: 500px;
  border: 1px solid;
  display: grid;
  grid-template-rows: 100px 1fr;
}

.child {
  display: grid;
  grid-auto-rows: 1fr;
  border: 1px solid;
}


.header {
  background: yellow;
}

.content {
  background: rgba(255, 0, 0, 0.3);
  border: 1px dashed blue;
}

<div class="parent">
<div class="header"></div>
  <div class="child">
    <div class="content">
    lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>lorem ipsum<br>
    </div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

您还可以将min-height设置为任何子元素以创建下限：

.parent {
  min-height: 500px;
  border: 1px solid;
  display: grid;
  grid-template-rows: 100px 1fr;
}

.child {
  display: grid;
  grid-auto-rows: 1fr;
  border: 1px solid;
}


.header {
  background: yellow;
}

.content {
  background: rgba(255, 0, 0, 0.3);
  border: 1px dashed blue;
}
.content:last-child {
  min-height:300px;
}

<div class="parent">
<div class="header"></div>
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

增加父级的高度也会使内容扩展：

.parent {
  min-height: 900px;
  border: 1px solid;
  display: grid;
  grid-template-rows: 100px 1fr;
}

.child {
  display: grid;
  grid-auto-rows: 1fr;
  border: 1px solid;
}


.header {
  background: yellow;
}

.content {
  background: rgba(255, 0, 0, 0.3);
  border: 1px dashed blue;
}

<div class="parent">
<div class="header"></div>
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

---

更新

根据您在注释中的要求，这里是一个 hack ，它将执行您想要的操作：

.parent {
  border: 2px solid red;
  display: grid;
  grid-template-rows: 100px;
  grid-auto-rows: 300px; /*this will define the child height*/
}

.child {
  display: grid;
  border: 1px solid;
  display:contents; /*use this to cross the child and make content grid element*/
}


.header {
  background: yellow;
}

.content {
  background: rgba(255, 0, 0, 0.3);
  border: 1px dashed blue;
}

<div class="parent">
<div class="header"></div>
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

我使用display:contents来使子部分成为网格的一部分，然后我明确定义了父项中每个子项的高度，而不是min-height

Answer 2

将100％设置为内部网格将迫使其占据外部网格项中的所有空间，并导致溢出。您应该为其设置400px explicity （在这种情况下，外部网格项将展开）

您可以在外部网格上设置grid-template-rows: 100px minmax(400px, 1fr)而不是设置min-height，而在内部网格上设置grid-auto-rows: 400px。为简化起见，您可以使用CSS variables：

:root {
  --h: 400px;
}
.parent {
  border: 1px solid;
  display: grid;
  grid-template-rows: 100px minmax(var(--h), 1fr);
}
.child {
  display: grid;
  grid-auto-rows: var(--h);
  border: 1px solid;
}
.header {
  background: yellow;
}
.content {
  background: rgba(255, 0, 0, 0.3);
  border: 1px dashed blue;
}

<div class="parent">
<div class="header"></div>
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>