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

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

В таком случае, как сделать так, чтобы первый ряд свернулся, чтобы второй ряд заполнил пространство? 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>