How do I set grid's row height to its tallest cell's height and stretch all cell's height?

[ShinChven]

Hi,

I'm trying to use Fixed Size Grid in my project. But I also want the row height to be dynamic.

How do I set grid's row height to its tallest cell's height and stretch all cell's height?

For example: there are 4 cells in a row, heights of them are [24, 25, 26, 33], then I want the row height to be 33, and all cell's height stretch to 33.

I did it with FlexBox's flex-wrap attribute like:

import styles from './index.less';

export default function IndexPage() {

  // populate demo data
  const items = new Array<string>();
  for (let i = 0; i < 50; i++) {
    const arr= [];
    for (let j = 0; j < i; j++) {
      arr.push(j);
    }
    items.push(arr.join("-"));
  }

  return (
    <div className={styles.grid}>
      {items.map((item)=>{
        return <div className={styles.cell_wrapper}>{item}</div>
      })}
    </div>
  );
}

.grid{
  height: 100%;
  background: #5c2929;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.cell_wrapper{
  margin: 4px;
  width: 20%;
  border: 1px solid black;
}

Thank you for your excellent job creating react-window.

[ShinChven]

I solved this requirement by nesting a flex row inside a react-virtuoso

Here's my example.