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>
);
}
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:Thank you for your excellent job creating
react-window
.