CODEWITHSUNDEEP
csscss-grid
Jim Moody
Jim Moody

Reputation: 808

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>

Upvotes: 0

Views: 815

Answers (3)

Danny Arsenault
Danny Arsenault

Reputation: 11

Use auto for grid-template-row

Upvotes: 1

Bibek Shakya
Bibek Shakya

Reputation: 151

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

Upvotes: 0

James Coyle
James Coyle

Reputation: 10398

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>

Upvotes: 3

Related Questions