这里是我正在处理的布局（https://codepen.io/tomaszal/pen/QWWJPRQ）：
body {
height: calc(100vh - 2rem);
margin: 1rem;
display: grid;
grid-gap: 1rem;
grid-template-columns: [c1] 1fr [c2] 1fr [c3];
grid-template-rows: [r1] min-content [r2] auto [r3] auto [r4];
}
body > div { padding: 1rem; }
.fill { background-color: green; }
.narrow { background-color: orange; }
.f1 { grid-area: r1 / c1 / r3; }
.f2 { grid-area: r2 / c2 / r4; }
.n1 { grid-area: r3 / c1 / r4; }
.n2 { grid-area: r1 / c2 / r2; }<body>
<div class="fill f1">Fill all available height (auto)</div>
<div class="fill f2">Fill all available height (auto)</div>
<div class="narrow n1">Mimic n2 height (1fr of min-content?)</div>
<div class="narrow n2">Some text with unknown height (min-content)</div>
</body>我正在尝试使底部橙色div的高度与顶部橙色div的高度相同。如果我可以使用min-content作为1 fr单位的基础，那么我可以这样说：
grid-template-rows: [r1] (min-content, 1fr) [r2] auto [r3] 1fr [r4];
是否有任何明智的方法？我尝试了以下方法：
grid-template-rows: [r1] 1fr [r2] auto [r3] 1fr [r4];
grid-template-rows: [r1] 1fr [r2] max-content [r3] 1fr [r4];
grid-template-rows: [r1] 1fr [r2] min-content [r3] 1fr [r4];
但是这些都无法产生理想的结果。
一个怪异的想法是首先使它们都在同一行上，以便它们可以得到相同的高度，然后平移左列以获得最终输出
body {
height: calc(100vh - 2rem);
margin: 1rem;
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content auto;
}
body > div { padding: 1rem; }
.fill { background-color: green; }
.narrow { background-color: orange;order:-1 }
/* Remove the below to see the output before the translate*/
.n1 {
transform:translateY(calc((100vh - 2rem) - 100%))
}
.f1 {
transform:translateY(calc(100% - (100vh - 2rem)))
}<body>
<div class="fill f1">Fill all available height (auto)</div>
<div class="fill f2">Fill all available height (auto)</div>
<div class="narrow n1">Mimic n2 height (1fr of min-content?)</div>
<div class="narrow n2">Some text with <br> unknown height <br>(min-content)</div>
</body>我认为仅使用CSS可能无法做到这一点。这是一个使用JS和CSS变量的解决方案，完全可以满足我的要求（https://codepen.io/tomaszal/pen/rNNQggO）：
unique = document.getElementById("unique");
new ResizeSensor(unique, function() {
document.documentElement.style.setProperty('--unique-height', `${unique.clientHeight}px`);
});body {
height: calc(100vh - 2rem);
margin: 1rem;
display: grid;
grid-gap: 1rem;
grid-template-columns: [c1] 1fr [c2] 1fr [c3];
grid-template-rows: [r1] min-content [r2] auto [r3] var(--unique-height, auto) [r4];
}
body > div { padding: 1rem; }
.fill { background-color: green; }
.narrow { background-color: orange; }
.f1 { grid-area: r1 / c1 / r3; }
.f2 { grid-area: r2 / c2 / r4; }
.n1 { grid-area: r3 / c1 / r4; }
.n2 { grid-area: r1 / c2 / r2; }<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.2.1/ResizeSensor.min.js"></script>
<body>
<div class="fill f1">Fill all available height (auto)</div>
<div class="fill f2">Fill all available height (auto)</div>
<div class="narrow n1">Mimics n2 height</div>
<div class="narrow n2" id="unique">
Some text with unknown unique height (min-content)
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>这显然是不理想的（任何应该由CSS完成的JS执行任务都不是，但是现在总比没有好。
我相信min-content也将在最后一行上使用，因此，最后一行上的内容将缩小到其内容大小。 ...如果我理解这个问题，]
body {
height: calc(100vh - 2rem);
margin: 1rem;
display: grid;
grid-gap: 1rem;
grid-template-columns: [c1] 1fr [c2] 1fr [c3];
grid-template-rows: [r1] min-content [r2] auto [r3] min-content [r4];
}
body > div { padding: 1rem; }
.fill { background-color: green; }
.narrow { background-color: orange; }
.f1 { grid-area: r1 / c1 / r3; }
.f2 { grid-area: r2 / c2 / r4; }
.n1 { grid-area: r3 / c1 / r4; }
.n2 { grid-area: r1 / c2 / r2; }<body>
<div class="fill f1">Fill all available height (auto)</div>
<div class="fill f2">Fill all available height (auto)</div>
<div class="narrow n1">Mimic n2 height (1fr of min-content?)</div>
<div class="narrow n2">Some text with unknown height (min-content)</div>
</body>如果我理解正确，则可以使用CSS：在。narrow类上添加height：35vh;还是50vh取决于您是否要滚动，还是通过JS通过将元素1的自定义大小设置为想要的元素2 element2.style.height = element1.clientHeight