CSS网格中的垂直间距分布

Question

我是CSS网格的新手，并且遇到布局问题： 我希望第一个条目上的段落文本位于标题的正下方，但是横跨两行的左侧图像正在使右侧单元格平均展开，从而在标题和段落之间留了太多空间。

是否有办法确保第一行的大小仅适合标题的高度，并且段落行会占用所有剩余空间？我想理想地使用CSS来做到这一点。

通常我会使用容器div作为标题和段落，但是我使用CSS网格从移动布局更改源顺序，所以我认为容器不起作用。

Codepen link

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>