【发布时间】：2018-07-29 00:23:31
【问题描述】：
我在 CSS 网格中遇到了多行项目的问题。我不确定这是设计使然还是奇怪的行为。
.container {
display: grid;
grid-template-columns: 65% 35%;
grid-template-rows: min-content auto;
grid-template-areas: "head side" "body side";
}
.item-head {
grid-area: head;
}
.item-body {
grid-area: body;
}
.item-side {
grid-area: side;
}
基本上，item-side 跨越右侧的两行。虽然head块在左侧第一行，所以head的高度应该是它的最小内容，但它实际上是被side内的内容推动的>.
这是codepen上的演示
这是我所做的修复之一，尝试使用 auto 作为 head。 auto.
但是当网格行是自动时，它还有其他问题。 here 是在 body 没有足够内容的情况下演示的示例。
我想出的最终版本是this。不使用 2x2 网格，而只有两列。
从MDN可以看出min-content是一个关键字，代表了占据网格轨道的网格项的最大最小内容贡献。
这有道理，但它怎么会被多行内容推开呢？如果一个项目跨越 2 行，那么它应该只推动那两行的高度，而不是第一行的高度。我对此有点困惑，如果有人能解释发生了什么，那就太好了。
编辑：
如果我们将 1fr 用于body 片段，则内容显示正确。现在，fr 单位，也称为剩余空间的分数，仅在MDN 中被 IE Edge 支持。虽然来自CSS-Tricks 评论的其他一些来源，但人们说它与网格布局结合使用。
我已经在最新的 Firefox 和 chrome 上测试了 fr 单元，它工作正常。
但问题仍然存在，side 区域覆盖 2 行，其上下文为 2 行，而头部和身体的上下文为 1 行。这些 1 行内容之间的线由 2 行区域的内容调整。无论auto 进行何种计算，它都应该忽略任何不相关的内容。
这个问题的关键是，跨两行的单元格应该只影响两行的总高度，而不会对单个行造成任何改变。我从未在 WPF 网格系统上遇到过同样的问题，但在 CSS 网格中，这是我见过的奇怪行为之一。
【问题讨论】：
-
我不明白这个问题。你能提供一个草图或其他东西来说明吗？
-
如果你看我在here创建的demo，绿色背景的单元格的高度不是由绿色单元格的内容决定的，而是由蓝色单元格的内容决定的。蓝色单元格是跨两行的区域，里面的内容不应该影响那些单行单元格。您需要在桌面内查看该演示。