Как свернуть неиспользуемую строку в сетке CSS?

Question

Итак, у меня есть простой стек из трех абзацев на мобильном устройстве, который я хочу стилизовать в сетке на больших окнах просмотра без изменения исходного порядка.

В первом разделе может быть что угодно, от нескольких строк до отсутствия контентасовсем.

В таком случае, как сделать так, чтобы первый ряд свернулся, чтобы второй ряд заполнил пространство?То есть, когда верхняя секция пуста, последняя секция должна появиться сверху

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