因此，我在移动设备上有一个由三个段落组成的简单堆栈，我想在较大视口上的网格中设置样式，而不更改源顺序。
第一部分可能有几行内容，也可能根本没有内容。
在这种情况下，如何使第一行折叠以便第二行填充空间？ IE 当顶部部分为空时，最后一个部分应出现在顶部
.grid {
display: grid;
grid-template-rows: min-content auto;
grid-template-columns: 60% 40%;
grid-template-areas:
"main first"
"main last";
}
.first { grid-area: first; }
.main { grid-area: main; }
.last { grid-area: last; }
<div class="grid">
<b class="first">Grant me revenge!</b>
<b class="main">Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't bullshit me. Into the tunnel. Bring your toy back to the carpet.</b>
<b class="last">Make it quick because my horse is getting tired.</b>
</div>
而不是这个：
grid-template-rows: min-content auto
尝试这个：
grid-template-rows: min-content 1fr
With 1fr您告诉第二行消耗该列中的所有可用空间。因此，当内容中没有内容时.first元素，即.second元素占据空间。
问题在于auto它的长度是相对于轨道上的其他网格项 https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-auto。这意味着它不会总是缩小以适应某一特定项目（例如min-content旨在做到这一点），并且如果另一个项目具有一定的大小（就像您在代码中看到的那样），它不会允许一个项目完全消失。
.grid {
display: grid;
grid-template-rows: min-content 1fr; /* adjustment */
grid-template-columns: 60% 40%;
grid-template-areas:
"main first"
"main last";
}
.first { grid-area: first; background-color: orange; }
.main { grid-area: main; background-color: aqua; }
.last { grid-area: last; background-color: lightgray; }
<div class="grid">
<b class="first">Grant me revenge!</b>
<b class="main">Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't bullshit me. Into the tunnel. Bring your toy back to the carpet.</b>
<b class="last">Make it quick because my horse is getting tired.</b>
</div>
<br>
<div class="grid">
<b class="first"></b>
<b class="main">Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't bullshit me. Into the tunnel. Bring your toy back to the carpet.</b>
<b class="last">Make it quick because my horse is getting tired.</b>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
