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