如何修复 CSS 网格行以不采用自动高度？

Question

我正在尝试得到这个结果：

但是我的代码正在这样做：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

.image {
    grid-row-start: 1;
    grid-row-end: 4;
}

h1 {
    grid-column-start: 2;
    grid-column-end: 2;
}

.desc {
    grid-column-start: 2;
    grid-column-end: 3;
}

<div class="container">
<img src="https://placehold.co/400x400">
<h1>Title</h1>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text here</p>
</div>

我不知道如何解决这个问题以及这种行为是什么。我用谷歌搜索并阅读，但这没有意义。有人可以看一下并让我知道为什么我的逻辑失败了吗？

Answer 1

这是一个简单的修复，只需在

image

标记处添加

img

类并在之间添加一些间隙。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap:20px;
}

.image {
    grid-row-start: 1;
    grid-row-end: 4;
}

h1 {
    grid-column-start: 2;
    grid-column-end: 2;
}

.desc {
    grid-column-start: 2;
    grid-column-end: 3;
}

<div class="container">
<img class="image" src="https://placehold.co/400x400">
<h1>Title</h1>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text here</p>
</div>