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

Question

所以我在移动设备上有一个简单的三段堆栈，我想在较大视口(viewport)的网格中设置样式，而不更改源顺序。

第一部分可能有几行，也可能没有任何内容。

在这种情况下，如何使第一行折叠以便第二行填充空间？ 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 的问题是它的长度是 relative to other grid items on the track .这意味着它不会总是收缩以适应一个特定的元素(就像 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>