通过使用带有可变高度的元素引起的网格行引起的空间

Question

这是页面的基本布局：

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  float: left;
}

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#test-one {
  grid-column-start: 1;
  grid-column-end: 2;
  width: 100%;
  height: 300px;
}

#test-two {
  grid-column-start: 2;
  grid-column-end: 3;
  width: 100%;
}

#test-three {
  grid-column-start: 2;
  grid-column-end: 3;
  width: 100%;
}

<div id="grid">
  <div id="test-one"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Feral_cat_Virginia_crop.jpg"></div>
  <div id="test-two">
    <h2> Hello </h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</div>
  <div id="test-three">
    <h2>Please no gap to top text with the "Hello" headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
</div>

图像将具有特定的高度。文本区域具有基于文本的动态高度。在具有IDS ＃test-Two和＃test-test-test-three的文本块之间，不应是垂直差距。可以使用几个CSS设置来修复？还是需要重新设计布局？

加法：我认为使用网格行设置在这里无济于事，因为高度是可变的。让我知道我是否错了。

Answer 1

从我的评论

您可以在您喜欢的网格教程中跨越2行（请参见网格：xx;）），请查看砖石网格（搜索中的搜索），甚至使用CSS，如果可以使用CSS为你。 -
G-Cyrillus
1分钟

在这里通过网格行驶/结束进行示例，就像您对专栏一样：

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}

#test-one {
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: red;
  grid-row-start: 1;
  grid-row-end:3;
  height: 100px;
  width: 100%;
}

#test-two {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: blue;
  height: 50px;
  width: 100%;
}

#test-three {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: green;
  height: 50px;
  width: 100%;
}

<div id="grid">
  <div id="test-one">Hello Box</div>
  <div id="test-two">Hey Box</div>
  <div id="test-three">Please no top gap to the "Hey Box"</div>
</div>