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

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行中的内容高 100 像素，则该行高 100 像素。

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

因为你在这里告诉第一行是 62px 高：

  grid-template-rows: 62px auto;

为什么它高于右列内容？

不是……但我可以看出你可能会这么想。

左单元格高度如何取决于右列并且它包含高度？

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

内的内容cell-3不继承任何网格特性等流动为正常。