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

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

enter image description here

Desired State

enter image description here

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>

2 answers

  • answered 2020-01-27 16:10 James Coyle

    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>

  • answered 2020-01-27 16:12 Bibek Shakya

    Did you try removing this code? grid-template-rows: repeat(2, 1fr);