[Resolved] Using flexbox for equal height blocks/columns

Home Forums Support Using flexbox for equal height blocks/columns

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1231585
    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

    #1231821
    David
    Staff
    Customer Support

    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

    #1231924
    Greg

    It is, and that was just what I was after thanks again! πŸ™‚

    #1232230
    David
    Staff
    Customer Support
    #1552784
    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

    #1553106
    Tom
    Lead Developer
    Lead Developer

    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!

    #1553196
    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

    #1553230
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1553244
    Dan

    Cool, Thanks!

    #1555349
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.