Set row height to fit content height in CSS Grid - html

Question

I have a grid with two columns and two rows. I have to place two grid items in one column (on the right) and one item on the left. Then I want first element from the right column to have maximum height equal to its content height. How can I accomplish this?
The problem that I'm facing right now is that these two items on the right, have 50% height and I can't find a way to to set first one to minimum possible height, and the other one to the rest of height (auto).
Just to clarify - height of each items is not fixed. Below you can see how it look right now.
One more thing, I can't change order of HTML DIV elements due to responsive web design.
.grid{
display: grid;
grid-template-columns: auto 300px;
grid-column-gap: 20px;
grid-template-areas: "main_content top" "main_content bottom";
}
.left{
grid-area: main_content;
}
.top_right{
grid-area: top;
background: #ffa4a4;
}
.bottom_right{
grid-area: bottom;
background: #c7ffae;
}
<div class="grid">
<div class="top_right">I'm top right</div>
<div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
<div class="bottom_right">I'm bottom right</div>
</div>

Answer 1

You just need to set the first row to auto (content height) and the second row to 1fr (consume remaining space).
.grid{
display: grid;
grid-template-rows: auto 1fr; /* NEW */
grid-template-columns: auto 300px;
grid-column-gap: 20px;
grid-template-areas: "main_content top" "main_content bottom";
}
.left{
grid-area: main_content;
}
.top_right{
grid-area: top;
background: #ffa4a4;
}
.bottom_right{
grid-area: bottom;
background: #c7ffae;
}
<div class="grid">
<div class="top_right">I'm top right</div>
<div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
<div class="bottom_right">I'm bottom right</div>
</div>

Answer 2

You can use height: fit-content to ensure that the element matches the height of the content contained within... though note that the second box will still retain its original position:
.grid{
display: grid;
grid-template-columns: auto 300px;
grid-column-gap: 20px;
grid-template-areas: "main_content top" "main_content bottom";
}
.left{
grid-area: main_content;
}
.top_right{
grid-area: top;
background: #ffa4a4;
height: fit-content;
}
.bottom_right{
grid-area: bottom;
background: #c7ffae;
}
<div class="grid">
<div class="top_right">I'm top right</div>
<div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
<div class="bottom_right">I'm bottom right</div>
</div>
While I'm not sure how to have the second box jump up to match the first with the Grid layout, the desired effect would be quite simple to achieve if you're willing to use flexbox.
Simply add display: flex to .grid, and create a new .right to contain .top_right and .bottom_right. Then optionally flex: 1 to both .left and .right:
.grid {
display: flex;
}
.left {
flex: 1;
}
.right {
flex: 1;
background: #c7ffae;
}
.top_right {
background: #ffa4a4;
height: fit-content;
}
<div class="grid">
<div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu
molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis.
Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero.</div>
<div class="right">
<div class="top_right">I'm top right</div>
<div class="bottom_right">I'm bottom right</div>
</div>
</div>
Note that you'll also need to move the green background from .bottom_right to .right in order for it to stretch the whole height.
This will work across all major browsers.
Hope this helps! :)