如何折叠CSS网格中未使用的行？

Question

所以我在移动设备上有一个简单的三个段落堆栈,我希望在较大视口的网格中设置样式,而不更改源顺序.

第一部分可能包含从几行到没有内容的任何内容.

在这种情况下,如何使第一行折叠,以便第二行填充空格？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>

Answer 1

代替这个：

grid-template-rows: min-content auto

尝试这个：

grid-template-rows: min-content 1fr

随着1fr你告诉第二行以消耗列中的任何和所有的可用空间。因此，当.first元素中没有内容时，.second元素将占用空间。

问题auto在于它的长度相对于轨道上的其他网格项目。这意味着它不会总是收缩以适合一个特定的项目（如min-content设计那样），并且如果另一个项目具有一定的大小（如您在代码中看到的那样），它也不会允许该项目完全消失。 。

grid-template-rows: min-content auto

grid-template-rows: min-content 1fr