распределение вертикального интервала в сетке CSS

Question

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

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

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

ссылка Codepen

body {
  background: #444;
}

.chunkheader,
.chunkpara,
.chunkimage {
  margin-top: 0;
  margin-bottom: 10px;
}

.chunk {
  background: #fff;
  padding: 20px;
  margin: 20px;
}

.chunkimage {
  max-width: 100%;
}

@media screen and (min-width:600px) {
  .chunk {
    display: grid;
    grid-template-columns: 200px auto;
    grid-column-gap: 20px;
  }
  .chunkimage {
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .chunkheader {
    grid-column-start: 2;
  }
  .chunkpara {
    grid-column-start: 2;
  }
}

<div class="chunk">
  <h2 class="chunkheader">Entry one</h2>
  <img src="https://picsum.photos/600/700/?image=571" alt="" class="chunkimage">
  <p class="chunkpara">The A000005 is an Arduino Nanoboard which is a small, breadboard-friendly board based on the ATmega328 (Arduino Nano 3.0) or ATmega168 (Arduino Nano 2.x). It has similar functionality to the Arduino Duemilanove, but in a different package. It lacks
    only a DC power jack and is instead powered through the Mini-B USB connector. The Nano was designed and is being produced by Gravitech.</p>
</div>
<div class="chunk">
  <h2 class="chunkheader">Entry two</h2>
  <img src="https://picsum.photos/600/400/?image=572" alt="" class="chunkimage">
  <p class="chunkpara">The A000005 is an Arduino Nanoboard which is a small, breadboard-friendly board based on the ATmega328 (Arduino Nano 3.0) or ATmega168 (Arduino Nano 2.x). It has similar functionality to the Arduino Duemilanove, but in a different package. It lacks
    only a DC power jack and is instead powered through the Mini-B USB connector. The Nano was designed and is being produced by Gravitech.</p>
</div>
<div class="chunk">
  <h2 class="chunkheader">Entry three</h2>
  <img src="https://picsum.photos/600/400/?image=573" alt="" class="chunkimage">
  <p class="chunkpara">The A000005 is an Arduino Nanoboard which is a small, breadboard-friendly board based on the ATmega328 (Arduino Nano 3.0) or ATmega168 (Arduino Nano 2.x). It has similar functionality to the Arduino Duemilanove, but in a different package. It lacks
    only a DC power jack and is instead powered through the Mini-B USB connector. The Nano was designed and is being produced by Gravitech.</p>
</div>

Как это выглядит:

Как бы я хотел выглядеть:

Answer 1

Вы можете указать grid-template-rows, как показано ниже:

body {
  background: #444;
}

.chunkheader,
.chunkpara,
.chunkimage {
  margin-top: 0;
  margin-bottom: 10px;
}

.chunk {
  background: #fff;
  padding: 20px;
  margin: 20px;
}

.chunkimage {
  max-width: 100%;
}

@media screen and (min-width:600px) {
  .chunk {
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows:auto 1fr;
    grid-column-gap: 20px;
  }
  .chunkimage {
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .chunkheader {
    grid-column-start: 2;
  }
  .chunkpara {
    grid-column-start: 2;
  }
}

<div class="chunk">
  <h2 class="chunkheader">Entry one</h2>
  <img src="https://picsum.photos/600/700/?image=571" alt="" class="chunkimage">
  <p class="chunkpara">The A000005 is an Arduino Nanoboard which is a small, breadboard-friendly board based on the ATmega328 (Arduino Nano 3.0) or ATmega168 (Arduino Nano 2.x). It has similar functionality to the Arduino Duemilanove, but in a different package. It lacks
    only a DC power jack and is instead powered through the Mini-B USB connector. The Nano was designed and is being produced by Gravitech.</p>
</div>

<div class="chunk">
  <h2 class="chunkheader">Entry two</h2>
  <img src="https://picsum.photos/600/400/?image=572" alt="" class="chunkimage">
  <p class="chunkpara">The A000005 is an Arduino Nanoboard which is a small, breadboard-friendly board based on the ATmega328 (Arduino Nano 3.0) or ATmega168 (Arduino Nano 2.x). It has similar functionality to the Arduino Duemilanove, but in a different package. It lacks
    only a DC power jack and is instead powered through the Mini-B USB connector. The Nano was designed and is being produced by Gravitech.</p>
</div>

<div class="chunk">
  <h2 class="chunkheader">Entry three</h2>
  <img src="https://picsum.photos/600/400/?image=573" alt="" class="chunkimage">
  <p class="chunkpara">The A000005 is an Arduino Nanoboard which is a small, breadboard-friendly board based on the ATmega328 (Arduino Nano 3.0) or ATmega168 (Arduino Nano 2.x). It has similar functionality to the Arduino Duemilanove, but in a different package. It lacks
    only a DC power jack and is instead powered through the Mini-B USB connector. The Nano was designed and is being produced by Gravitech.</p>
</div>