How to make height dynamic?

[drcmda]

How to make height dynamic?

[ptcampbell]

If you pass the image height and width (whether from the DOM or otherwise) into your grid item you can determine its ratio.

Then you could set the height of each box to zero and set its padding-bottom to a percentage using this this method.

I haven't tried it but it should work, including responsively without re-render.

Edit: Scratch that, the parent container's height will always be 0 since it is an accumulative height of each item. You'd probably need to set an image's height by fetching its width from the DOM once it has loaded.

[eriksachse]

I did it the following:
First, measure the width of the container with use-measure
const [refWindow, boundsWindow] = useMeasure();
…
<div className={styles.container} ref={refWindow}>

Then, in your grid props heights use the images width, height and container width to measure the height of the element. Keep in mind to fracture it with the count of columns.

heights={(d) => {
          const aspect = ((d.height / d.width) * boundsWindow.width) / 3;
          return aspect;
}}