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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (38)

因此,我在手机上有一个简单的三段堆栈,我想在更大的视图上设置网格的样式,而不改变源的顺序。

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

在这种情况下,如何使第一行折叠以使第二行填充空格?当顶部部分为空时,最后一个部分应出现在顶部。

.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 {
  display: grid;
  grid-template-rows: min-content auto;
  grid-template-columns: 60% 40%;
  grid-template-areas: "main first" "main last";
}

.top {
  grid-col: 2;
}

.main {
  grid-area: main;
}

.last {
  grid-col: 2;
  background-color: tomato;
}

.grid:hover .top {
  display: none;
}
<div class="grid">
  <b class="top">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

带着1fr你正在告诉第二行使用列中可用的任意和所有可用空间。因此,当在.first元素,.second元素占用空间。

与.有关的问题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>

扫码关注云+社区

领取腾讯云代金券