Two column grid layout with varying height

[Geoffrey]

Hard to explain, so bare with me. Thanks
I have a container.
In it are 4 elements

<div id="container">
    <div id="a">on right, always tall enough to fill height of container <br /> could be many <br> many <br> lines</div>
    <div id="b">left one line</div>
    <div id="c">left one line</div>
    <div id="d">left one line [or maybe <br> way  <br> more <br> lines  <br> than div  <br> a  <br> could <br> ever <br>  possibly  <br> have]</div>
</div>

I would like to have element #a be a set width, lets say 200px, always fill the available height, and be on the right.
The other 3 elements should stack underneath each other on the left. They should not fill the vertical space.

If #a is the tallest element, the container should be the height of #a and the other three elements should stack, take up the least amount of vertical space and leave empty space below them.

However, if element #d has a lot of content and becomes very tall, the total combined height of #b, #c and #d could be more than the height of #a. In this case the container should be the height of the total of the thee elements, and #a should also have that same height.

Like this:
Possibility 1

b   a
c   a
d   a
     a
     a

Possibility 2

b   a
c   a
d   a
d   a
d   a
d   a
d   a

I feel like this should be possible with a grid layout, but I can’t quite seem understand how to make this happen.
I really can’t add a container around #b, #c and #d.

Is there someway to use repeat to add extra rows under #d, if needed?

Sorry if this doesn’t make sense. I am having trouble forming the question, which is one reason I am having trouble with the answer. Bad question, bad answer.

Thanks in advance for reading this. I am new to this forum, but now that I have found it, I hope to be able to contribute going forward.

-Geoff

[Paulie_D]

No, this is not exactly possible with CSS-Grid unless you are dealing with known number of rows since there is no method of telling an item to span all rows unless the number is known.

Also, if the row heights aren’t consistent from column to column it’s not a grid.

[Paulie_D]

I really can’t add a container around #b, #c and #d.

Unfortunately, that’s what is generally required….

[wolfcry911]

https://codepen.io/wolfcry911/pen/JwXwyQ

[Geoffrey]

Sorry for not replying sooner. It took a few days for this to get posted after I submitted it. Assuming it needed to be moderated?
Anyway

In this case, I do know the number of rows.
I was able to solve this by adding an additional row row at the bottom with a height of 1fr, and had the right column span all of the rows including this always empty row. When the rows on the left exceed the height of the right column, the bottom row is completely collapsed. When the right column exceeds the left rows, the extra row fills the space. In both cases, the height of container is the minimum required.

#container {
    display: grid;
    grid-template-columns: 1fr 275px;
    grid-template-rows: auto auto auto 1fr;
    grid-column-gap: 15px;
    grid-template-areas: 
        "rowb cola" 
        "rowc cola" 
        "rowd cola" 
        ". cola";
}

This works out quite nicely.

[Author]

Posts