Reply To: Two column grid layout with varying height

[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.