当所有内容都是动态时，如何创建3列2行CSS网格布局？

Question

我很难构建具有动态内容的CSS网格。我将提供一些关于我所拥有和我所想要的照片的图片。

主要问题是，左侧的div始终会扩展以填充整个网格，但我只希望它们与要容纳其中的内容一样大。

知道大小时我可以轻松地做到这一点，但是我无法知道每个div的大小。

当前状态

所需状态

当前状态代码

.parent {
  width: 500px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.parent>div {
  background: red;
  margin: 5px;
}

.div5 {
  grid-area: 1 / 3 / 4 / 4;
}

<div class="parent">
  <div class="div1">This is a small amount of content</div>
  <div class="div2">This is a small amount of content</div>
  <div class="div3">This is a small amount of content</div>
  <div class="div4">Lorem Ipsum is simply dummy text of the printing and typesetting industrremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Loasdum</div>

  <div class="div5">Lorem Ipsum is simply dummy text of the printing and typesetting industrremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing LoasdumLorem Ipsum is simply dummy text of the printing and typesetting
    industrremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing LoasdumLorem Ipsum is simply dummy text of the printing and typesetting industrremaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing LoasdumLorem </div>
</div>

Answer 1

仅在行定义中使用auto而不是小数单位：

.parent {
  width: 500px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.parent>div {
  background: red;
  margin: 5px;
}

.div5 {
  grid-area: 1 / 3 / 4 / 4;
}

<div class="parent">
  <div class="div1">This is a small amount of content</div>
  <div class="div2">This is a small amount of content</div>
  <div class="div3">This is a small amount of content</div>
  <div class="div4">Lorem Ipsum is simply dummy text of the printing and typesetting industrremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Loasdum</div>

  <div class="div5">Lorem Ipsum is simply dummy text of the printing and typesetting industrremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing LoasdumLorem Ipsum is simply dummy text of the printing and typesetting
    industrremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing LoasdumLorem Ipsum is simply dummy text of the printing and typesetting industrremaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing LoasdumLorem </div>
</div>

Answer 2

您是否尝试删除此代码？ grid-template-rows: repeat(2, 1fr);