Question

在下面的代码段中，我无法理解如何计算.cell1（橙色）高度。为什么这么高？为什么它比右列内容高？左单元格的高度如何取决于右列，并且其中包含高度？

header {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 62px auto;
  background: beige;
}

.cell1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background: salmon; 
}

.cell2 {
  grid-column: 1/2;
  grid-row: 2/3;
  background: MediumSpringGreen; 
}

.cell3 {
  grid-row: 1/3;
  grid-column: 2/3;
  background: PeachPuff; 
}

.cell3-1 {
  background: MediumPurple;
  height: 5px;
}

.cell3-2 {
  background: LightSkyBlue;
  height: 10px;
}

.cell3-3 {
  background: Navy;
  height: 30px;
}

<header>
  <div class="cell1">1</div>
  <div class="cell2">2</div>
  <div class="cell3">
    <div class="cell3-1"></div>
    <div class="cell3-2"></div>
    <div class="cell3-3"></div>
  </div>
</header>

Answer 1

让我们从您的标题开始。

css网格如何计算行自动高度？

auto仅表示它适应其中内容的高度。如果auto行中的内容高度为100px，则该行的高度为100px。

我无法理解.cell1（orange）的高度是如何计算的。为什么这么高？

因为您已经告诉第一行此处的高度为62px：

  grid-template-rows: 62px auto;

为什么它比右列内容高？

不是...但是我可以看到您可能会认为。

左单元格的高度如何取决于右列，并且其中包含高度？

在网格上下文中正确的内容仅 .cell-3 div ，但是您已告诉div跨越2行。因此，假设.cell-和.cell-2的组合高度。

内部 cell-3的内容不会继承任何网格属性，因此可以正常流动。

CSS Grid如何计算行自动高度？

1 个答案: