How do I create a 3 column 2 row css grid layout when all the content is dynamic?

Question

I am having a hard time building out a css grid with dynamic content. I'll provide a few pictures of what I have vs. what I want.

The main issue is that the divs on the left side always expand to fill the entire grid, but I only want them to be as big as they have to be to fit the content inside of them.

I can do it easily when the size is known, but I have no way of knowing what the size of each div will be.

Current State

Desired State

Current State Code

.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

Just use auto instead of fractional units on your row definitions:

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