How to resize Row in React Suite Grid to height of tallest cell

Question

I am working with React Suite's Grid to display university course data in a calendar format. The grid works great, other than the cell heights not being uniform: An image example of my Grid UI

Here is the code I currently have for the grid:

<Grid
    style={{
        width: "100%",
        height: "100%",
    }}
    data-testid="grid"
>
    {this.state.data.map((c) => (
        <Row>
            {c.map((e) => (
                <Col className="display-linebreak" style={this.formatCell(e)}>{e}</Col>
            ))}
        </Row>
    ))}
</Grid>

Is there any way to make the height of all cells consistent across their respective row, while still making the grid flexible enough for data intake of a variable number of dates and times? One way I tried to do this is by adding {{ height: "100%" }} as inline style for the Row, but I quickly realized that this or any similar approach will not work, as ultimately it is the cell height that needs to conform to a dynamic row height, based on the automatic heights of the other cells. Another thing I considered is that it may be easier to isolate a cell with respect to a Row if Column is the parent component to Row instead of the other way around, but I don't think this is possible in React Suite Grid.

Basically, my conundrum is, how can the cell know how tall it has to be if there are cells in the row that have not been rendered yet? Is it possible to go back and update the height post-render if a taller cell is found? How does a cell even know which row it is in?

Any tips or insight is greatly appreciated, I am happy to clarify anything or answer questions about it. Thank you in advance!

Answer 1

I did it with adding flex to the rs-row:

.rs-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

Then you can add height 100% to the cols or cards elements inside of them.