CSS Grid fit grid area to content

Question

I have been working with Grid for a while now and there is one thing I still can't quite figure out. When working with a two column layout, There are times when the content of one column forces the other column's content to have big gap beneath it because the first columns content is longer. Is there is a way to make each grid cell shrink vertically to fit the content of that cell? See the attached snippet for an example.

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  max-width: 300px;
}

.child {
  border: 1px solid #000;
}

<div class="parent">
  <div class="child">
   Content Content Content
  </div>
  <div class="child">
    Content Content Content Content Content Content Content
  </div>
  <div class="child" id="child2">
    Content Content Content
  </div>
  <div class="child">
    Content Content Content
  </div>
</div>

In this snippet, you will see the content of the top left grid area has a large gap beneath due to the top right's content. Is there a way to make it shrink to remove the gap? I'm not entirely sure this is possible with grid alone though.

Check: https://stackoverflow.com/questions/44377343/css-only-masonry-layout — , May 09 '20 at 17:36

score -1 · Answer 1 · answered May 09 '20 at 17:18

-1

You can add another div inside .child and apply border to it. Not sure if this is what you're aiming for.

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  max-width: 300px;
}

.child>div {
  border: 1px solid #000;
}

<div class="parent">
  <div class="child"><div>Content Content Content</div></div>
  <div class="child"><div>Content Content Content Content Content Content Content</div></div>
  <div class="child"><div>Content Content Content</div></div>
  <div class="child"><div>Content Content Content</div></div>
</div>

answered May 09 '20 at 17:18

aeran

1,375
5
14
18

Close. The only problem is, I would like the bottom left grid area to move up, maintaining the same grid-row-gap between the top left grid area and the bottom left grid area as the right ones have. So they become staggered. – Kevin May 09 '20 at 17:21
1

It seems you're doing a masonry layout. Have you read this type of layout at https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ ? Grid can't do this. – aeran May 09 '20 at 17:28
Yes, that's the word I was looking for. It's basically to become a masonry layout. I guess grid is out of the question for this one. – Kevin May 09 '20 at 17:29

CSS Grid fit grid area to content

1 Answers1