这是我正在处理的布局(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的高度相同。如果我可以使用最小内容作为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任务都不是(，但现在总比什么都没有好。