Matching Grid Height in Row

I’m using grid elements in a two-column layout on this page: https://balancedgrooming.mysites.io/grooming-services/

I like how the blue cell resizes to fit the text but I’d like the image in the 2nd column to be the same height as the image cell in the first column. I tried to make the cell height 100% or a gap element with 100% but neither of those options worked.

I watched the Gridorama videos and tried some minmax but I’m still figuring that stuff out.

Is there an easy way to make the image cell match the row height and still center the blue cell vertically?

Thanks.

Hello @zenzino,

Thanks for writing in!

Please understand that you are using two independent Grid element in each of those columns. They only way you can have the same or matching Grid height is by setting a minimum height for each of those Cells.

Set up a different minimum height for Cell 1 and Cell 2 to easily distinguish the Cell overlap. The same minimum height for Cell 1 on the left side and on the right side so that they will match.

Hope this makes sense.

Hey @ruenel,

Thanks for your response. That worked, but it also made the text cell grow rather than size based on the text…

Your comment made me decide to just make the whole row the grid rather than set it up as two columns with two separate grid element.

I used the flexbox to center the text element in the cell and applied the background color to the text block instead of the cell to get the effect I wanted.

Thanks for your great advice.

You are most welcome, @zenzino.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.