How to make height dynamic?

[ziqiaojin]

Hello, thank you for creating mauerwerk.

I am having some trouble making modifications as I am still kind of new to react. What I am trying to do is fit image contents in the grid cells, and instead of specifying the height of each cells, I want to adapt the height to whatever contents is in the cell. If you point out where should I be looking at, I would be very grateful.

[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;
}}

[fukemy]

@eriksachse, the height can not calculate for some reason, still not work to me