Hello, as you can see in the screenshot I attached below, I have a 4 cell grid. The paragraph takes 2 cells on the left. I want my square image (it’s natively square, 500px by 500px) to be responsive and take 1 cell so that I can put a centered quote in the remaining cell. The problem is that the image cell is for some reason longer than the image itself. Why is this happening?
Thank you!
Hello. Could you please share your read-only file so I can take a look?
Switch your row size from Auto Auto to 1fr 1fr.
The paragraph on the left is overall higher than the combined height of the image and the quote on the right. So the paragraph extends the grid downwards but the height of the bottom row is capped by the height of the quote since it is set to auto. So the first row grows in height to “fill up” that gap. Setting the height of the second row to 1fr resolves the problem.
The first row should remain at auto, unless the goal is to have equally-sized rows. Setting both to 1fr creates extra space on the bottom of the grid.
True, thanks for the correction.
I set the second row to 1fr. It worked, problem solved!
Thank you very much!
