[Resolved] Using flexbox for equal height blocks/columns

Home Forums Support Using flexbox for equal height blocks/columns

Viewing 4 posts - 1 through 4 (of 4 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
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.