由grid-auto-rows创建的网格行不会拉伸父网格

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>

---

UPDATE

根据您在评论中的要求，这是一个可以做你想要的黑客：

.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明确（在这种情况下，外部网格项将展开）

您可以设置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>