0

How to automatically stretch the height of specific item in CSS Grid?

I have simple masonry layout done by 2 x 3 CSS Grid. Everything works fine except the red area, which I would like to stretch vertically in order to place the containing text element just below the element in green area.

When I set auto height of grid rows, the red area is only that high as its inner element, while I would like to have this behavior happening in green area.

What is happening now:

What is happening now

Expected behavior:

Expected behavior

I could probably achieve this by setting padding-bottom or height to the element in red area, but the elements in the right column have dymanic height, so this is probably not the way... Also I could obviously group the content from green and red areas together, but this would be problematic too in my case...

So is it possible to make this happen just with the following markup and CSS Grid features, please?

EDIT: In CSS-only masonry layout is being said, with item dimensions undefined, this is not possible to do without JS. But there is one element which has static height (the inner element of green area). Does it make any change? 

.wrapper {
  display: grid;
  grid: repeat(3, auto) / 1fr 1fr;
}
.wrapper > div > * {
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
}

.item-1 {
  grid-area: 1 / 2 / 2 / 3;
  background: yellow;
}
.item-2 {
  grid-area: 1 / 1 / 3 / 2;
  background: green;
}
.item-3 {
  grid-area: 3 / 1 / 4 / 2;
  background: red;
}
.item-4 {
  grid-area: 2 / 2 / 4 / 3;
  background: darkturquoise;
}

.item-2 div {
  height: 100px;
}
<div class="wrapper">

  <div class="item-1">
    <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>

  <div class="item-2">
    <div></div>
  </div>

  <div class="item-3">
    <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>

  <div class="item-4">
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>

</div>
Tomas Korinek
  • 273
  • 1
  • 8
  • @MichaelBenjamin I have edited and clarified the question in order to distinguish it from possible duplicate. Would you be please so nice and review it again? Thanks! – Tomas Korinek Jun 04 '20 at 14:27
  • Michaels duplicate still applies, whether you have a single item with a defined height or many. – Paulie_D Jun 04 '20 at 14:35
  • *"So is it possible to make this happen just with the following markup and CSS Grid features?"* No. Not with just CSS. The reasons are explained in the duplicate. – Michael Benjamin Jun 05 '20 at 22:35
  • Essentially, you are asking for the red area to overflow its row and share another row with the green area, automatically. Grid doesn't work that way. – Michael Benjamin Jun 05 '20 at 22:36

0 Answers0