Как мне создать сетку с 3 столбцами и строкой css, когда весь контент динамический c?

Question

Мне трудно построить сетку css с динамическим содержимым c. Я приведу несколько фотографий того, что я имею против того, что я хочу.

Основная проблема заключается в том, что элементы в левой части всегда расширяются, чтобы заполнить всю сетку, но я только хочу, чтобы они были такими же большими, как они должны соответствовать содержимому внутри них.

Я могу сделать это легко, когда размер известен, но у меня нет никакого способа узнать, каким будет размер каждого элемента.

Текущее состояние

Желаемое состояние

Код текущего состояния

.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

Использование auto для сетки-шаблона-строки

Answer 3

Вы пытались удалить этот код? grid-template-rows: repeat(2, 1fr);