2 Column containers with matching height

Hello, I am looking to create a 2 column grid, the left side having 2 containers, and the right having three containers. I want the height of the 2 containers to match regardless of what is inside. Here is the page: https://bigguydigital.com/fun-with-grids/

Any ideas?

Hi @bigguydigital,

For now, you’ll need custom CSS.

In the upcoming GB update, it should be possible to do so through the settings.

Okay. What’s the custom CSS?

Try adding this through Appearance > Customize > Additional CSS:

.gb-container.gb-container-c90b9fbc > .gb-inside-container, .gb-grid-wrapper.gb-grid-wrapper-1314d65c  {
    height: 100%;
}

Didn’t work… Check the link again.

I was able to get it to work by adding a class .my-custom-container to the parent container, and then changing from > to > *

So it looks like this:

.my-custom-container > * .gb-inside-container, .my-custom-container > * .gb-grid-wrapper {
    height: 100%;
}

I see. Glad you got it to work!