如何折叠CSS网格中未使用的行? [英] How do you collapse unused row in a CSS grid?

问题描述

因此，我在移动设备上有一个简单的三段式堆栈，我想在较大的视口中以网格样式设置样式，而无需更改源顺序.

So I have a simple stack of three paragraphs on mobile that I want to style in a grid on larger viewports, without changing the source order.

第一部分可能从几行到根本没有内容.

The first section might have anything from several lines to no content at all.

在这种情况下，如何使第一行折叠以使第二行填充空间? IE，当顶部为空时，最后一部分应显示在顶部

In this case, how do I make the first row collapse so the second row fills the space? IE when the top section is empty, the last section should appear at the top

.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

使用1fr，您要告诉第二行消耗该列中的所有可用空间.因此，当.first元素中没有内容时，.second元素会占用空格.

With 1fr you're telling the second row to consume any and all free space available in the column. Hence, when there is no content in the .first element, the .second element takes the space.

auto的问题在于它的长度为

The problem with auto is that its length is relative to other grid items on the track. This means that it won't always shrink-to-fit one particular item (like min-content is designed to do) and it won't allow an item to disappear entirely if another item has some size (like you're seeing in your code).

.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>

这篇关于如何折叠CSS网格中未使用的行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！