通过使用可变高度的元素删除由网格行引起的空间

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>

图像将具有特定高度。文本区域具有基于文本的动态高度。 ID 为 #test-two 和 #test-three 的文本块之间不应有垂直间隙。可以通过一些 CSS 设置来解决这个问题吗？还是布局需要重新组织？

补充： 我认为使用 grid-row 设置在这里没有多大帮助，因为高度是可变的。如果我错了，请告诉我。

Answer 1

您的 CSS 代码中有 grid-column-gap: 10px;。这会在您的网格框之间留出 10px 的间距。试试这个：

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

#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;
  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%;
}

Answer 2

来自我的评论

You can either span .test-one through 2 rows (see grid-row: xx;) in your favorite grid tutorial) , take a look at masonry grid (here in the search) or even use column CSS if that's fine for you. – G-Cyrillus 1 min

这里有一个例子，通过 grid-row-start/end 就像你为专栏所做的那样：

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

通过使用可变高度的元素删除由网格行引起的空间

Remove spaces caused by grid rows by using elements with variable heights

css

grid

css-grid