Equal height in grid element

[threeoten]

I’m wondering how to make 2 cells of a grid element equal in height to the cell next to it, please see the video for more detail:

https://monosnap.com/file/nlF5MxVN0RENm09PvbJ9LdW85Mbv5A

[friech]

Hi @threeoten,

Thank you for writing in, the Grid Cells are already set as Stretch, so they should be in the same height.

• 
  
  
  

You just need to set your first cell to take up 2 rows, and please always make sure your background-image is set to cover so it will take up the entire cell (no white area). Please see the Copy Grid for your reference.

You can watch our Grid Element series to learn more about the Grid Layout.

Hope it helps,
Cheers!

[threeoten]

I was working with an image element inside Cell 1, not a background image. So I’ve updated it with slider element. I understand now that the Cells themselves are equal, but how would everything inside the cells to appear equal?

[ruenel]

Hello @threeoten,

The cells should be aligned vertically and horizontally. You can even set the cell layout to be “Stretched” vertically or horizontally.

Grid Settings:

Cell Settings (Individual):

I went ahead and played it around. At first, it did not do anything. After further investigation, I found out that you have inserted a broken html code which has messed up the cell layout structure.

I already fixed the issue by adding the necessary html </div> closing tag.

Kindly check your page now.

[threeoten]

Thanks, I see it looking correct on the front end now. But why does it still look out of line on the backend? (I tried in incognito mode too, still looks off on the backend.) See photo:

https://monosnap.com/file/1PauOcevQ04MNY7JcBuqz6KYGfgisc

[lely]

Hi @threeoten,

The difference is the layout editor side panel. Preview panel size on the editor is limited because the left part editor settings takes place. If you will turn it off you can see it is the same;