为什么使用 2 行与 4 行的网格模板区域时行高不同？

Question

使用我不理解的网格模板区域，我得到了一个令人惊讶的行为。 您可以在以下 CodePen 中看到使用 4 行的布局：

https://codepen.io/ericcarl/pen/dyeZzjP

HTML：

<div class="container">
  <h3>Title</h3>
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <p class="description">Paragraph</p>
</div>

CSS：

.container {
  display: grid;
  gap: 1em;
  grid-template-areas:
    'title item1'
    'description item1'
    'description item2'
    'description item3';
  grid-template-columns: 1fr 2fr;
  width: 640px;
}
h3 {
  grid-area: title;
  background-color: red;
  margin: 0;
}
.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.description {
  grid-area: description;
  background-color: yellow;
  margin: 0;
}
.item1, .item2, .item3 {
  background-color: blue;
  padding: 2em;
  height: 100px;
}

一切都按预期工作，特别是“标题”网格单元格的高度由其内容确定的方式。

但是在这个使用 2 行的版本中，“标题”和“段落”行的高度是不同的：

https://codepen.io/ericcarl/pen/rNvYzbR

HTML：

<div class="container">
  <h3>Title</h3>
  <div class="item1">Item 1</div>
  <p class="description">Paragraph</p>
</div>

CSS：

.container {
  display: grid;
  gap: 1em;
  grid-template-areas:
    'title item1'
    'description item1';
  grid-template-columns: 1fr 2fr;
  width: 640px;
}
h3 {
  grid-area: title;
  background-color: red;
  margin: 0;
}
.item1 {
  grid-area: item1;
}
.description {
  grid-area: description;
  background-color: yellow;
  margin: 0;
}
.item1 {
  background-color: blue;
  padding: 2em;
  height: 400px;
}

“标题”网格行现在是网格总高度的 50%，而不是由其内容决定。 为什么在使用 2 行而不是 4 行时会发生这种变化？ 如何让 2 行版本的“标题”单元格的高度由其内容决定？

谢谢你的帮助！

Answer 1

Grid 规范的第 11.5 节说，在不涉及轨道大小算法的细节的情况下

11.5。 解决固有轨道大小

此步骤将固有的轨道尺寸函数解析为绝对长度。 首先，它根据完全包含在单个轨道中的项目来解析这些大小。 然后它逐渐增加跨越多个轨道的项目的空间需求，尽可能在这些轨道上平均分配额外的空间。

在第一种情况下，标题只跨越一个轨道，因此它的高度是设置和固定的，并且所有空闲空间都分配给描述，因为它跨越多个轨道。

在第二种情况下，标题和描述都跨越一个轨道，因此它们之间的空间被平均分配。

---

正如 UmairFarooq 已经说过的那样，让 2 行版本的“标题”单元格的高度由其内容决定。 您需要定义两条轨道的高度。 我会 go 与grid-template-rows: auto 1fr;

 .container { display: grid; gap: 1em; grid-template-areas: 'title item1' 'description item1'; grid-template-columns: 1fr 2fr; grid-template-rows: auto 1fr; width: 640px; } h3 { grid-area: title; background-color: red; margin: 0; }.item1 { grid-area: item1; }.description { grid-area: description; background-color: yellow; margin: 0; }.item1 { background-color: blue; padding: 2em; height: 100px; }

 <div class="container"> <h3>Title</h3> <div class="item1">Item 1</div> <p class="description">Paragraph</p> </div>

Answer 2

您还必须定义行大小..

grid-template-rows: 0.3fr 1.7fr; 第一行需要 0.3fr，最后一行需要 1.7fr

 .container { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 0.3fr 1.7fr; gap: 10px 10px; grid-template-areas: "title item1" "description item1"; } h3 { grid-area: title; background-color: red; margin: 0; }.item1 { grid-area: item1; }.description { grid-area: description; background-color: yellow; margin: 0; }.item1 { background-color: blue; padding: 2em; height: 400px; }

 <div class="container"> <h3>Title</h3> <div class="item1">Item 1</div> <p class="description">Paragraph</p> </div>