Row and column borders using Grid

Hi

I need to create a 6 column by 3 row table with content in each cell. I thought it would be a natural fit for using Grid. The only issue is I can’t figure out how to put horizontal and vertical borders on the grid cells. Can anyone advise if this is possible please.

My share link is below. The page I’m trying to use the grid on is: lp3/bankruptcy-mortgage

Thanks in advance for any help

Graham

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

The grid is in the section titled:

How Soon After Bankruptcy Or An IVA Can I Get A Mortgage?

Hi @GrahamCox

Thanks for reaching out and your question about grid and borders.

The grid is just a guideline, so you cannot apply any borders to the actual grid cells. However, you can add borders to the individual grid children and the grid container.

https://cl.ly/3105c4d4ee8f/Image%2525202018-11-19%252520at%2525202.06.54%252520PM.png

https://cl.ly/0a50d0aeb855/Image%202018-11-19%20at%202.05.48%20PM.png

Then, make sure to stretch the grid children both horizontally and vertically. Or, apply a width and height of 100% on them.

https://cl.ly/163a9154fb8d/Image%202018-11-19%20at%202.21.32%20PM.png

Then, remove the gaps if you don’t want a gap in between them.

https://cl.ly/e98445dd8b98/Image%202018-11-19%20at%202.07.48%20PM.png

And here you go:

https://cl.ly/3e489fa80dcf/Image%202018-11-19%20at%202.09.29%20PM.png

Please, let me know if this is helpful or if you have any other questions, don’t hesitate to ask. I’ll do my best to help.

2 Likes

Thank you @AnnaKelian that is a massive help. I’m just stuck on the middle row where the Banktuptcy / DRO copy in the left column has gone onto two lines, it’s pushing things out of alignment. Any idea how I fix this. I’ve played around with the alignment settings but can’t seem to get it all lined up. See screenshot:

CloudApp

You’re most welcome @GrahamCox.

You can make the first column wider. Just set the sizing of that column to auto.

https://cl.ly/0600d1889327/Image%202018-11-19%20at%204.04.07%20PM.png

Also, delete the “enter” before the word DRO. That should fix it.

Make sure to add some paddings on the left and right as well.

1 Like

Got it sorted now @AnnaKelian, thanks v ery much for all your help!

Cheers.

Graham

1 Like

Anytime @GrahamCox

Glad it’s all sorted now. Happy designing and have a wonderful week ahead :relaxed:

You too @AnnaKelian

Cheers

1 Like