[Resolved] Using flexbox for equal height blocks/columns

[Greg]

Hi guys

I’ve searched high and low on the forums, reading different topics over the years and trying different flexbox options in my CSS but just can’t seem to figure this out.

I can see that the later versions of GP Premium have some flexbox in the CSS, but when I have three columns in a grid (without changing the vertical alignment) the heights of the columns shifts around.

Is there any chance of explaining a simple way to add the CSS to a container/grid using Generate Blocks please?

Thanks in advance
Greg

[David]

Hi there,

this is what i replied to in an email – I assume its the same Greg 🙂

1. Select the Grid Block as shown here: grid-overview

2. Give it a Additional CSS Class of: flex-align

3. Add this CSS to make all of the grid items within that grid a flex column:

.flex-align .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

4. Now you can apply flex adjustments eg.

/* Force all elements below first item ( Heading ) to bottom of column */

.flex-align .gb-inside-container>*:first-child {
    margin-bottom: auto;
}

or:

/* Force last item ( button) to bottom of column */

.flex-align .gb-inside-container>*:last-child {
    margin-top: auto;
}

There is no exact one fix all method – so requires a little experimentation

[Greg]

It is, and that was just what I was after thanks again! 🙂

[David]

You’re welcome

[Dan]

Hi David,
I’m a bit confused as to keeping the columns in the grid the same height.
I saw this thread – but keeping the setting default does not change anything:
https://generatepress.com/forums/topic/restrict-grid-container-height-in-generateblocks/#post-1180656
Adding the class and CSS rules also doesn’t make the columns the same height.

Take a look here, at the bottom of the page. I would like both containers which are inside a grid to be the same height.
https://freezpenclinics.com/

Thanks for your support,
Dan

[Tom]

Hi Dan,

Your structure looks like this:

.gb-grid-wrapper
    - .gb-grid-column
        - .gb-grid-container -- this container is full height
            - .gb-grid-container -- this container won't be, and it's the one with your styles

If you remove that extra Container, and apply your styles to the first one, it will work.

Hope this helps!

[Dan]

Thanks Tom, so when creating the grid, I can use the container auto-created by the grid, and don’t need to add another container.
Then, the default setting of vertical alignment will cause the columns to be same height. Understood.

Follow up questions:
1. Can the location of the buttons be controlled via the ui so they are at the same location or does it need absolute positioning via CSS?
2. General GB question: can all styles/settings of an element (container / heading / grid / button) be copied and then applied to another element? A copy/paste styles feature.

Thanks again for your support,

Dan

[Tom]

1. It depends on what kind of positioning you’re wanting. David provided a solution for moving the buttons to the bottom up above.

2. This is a feature in our Pro version 🙂

[Dan]

Cool, Thanks!

[Tom]

No problem 🙂

[Chris]

Sorry for the empty comment. I figured out the problem I’d posted about.

[Author]

Posts