Evening Up Columns

I’ve struggled with this for a while, and I’m finally going to ask for some help!

The situation is when I have a grid with 2 or more “cards”. The grid is set to default, so all the cards are the same height, however the “inner container” inside the cards does not stretch to the full height if the content is shorter in one card than it is in the other.

Here’s an example:

(I’ve put ID’s on all the elements, which you can see in the list view, so you can reference them easier).

What I’d like is to be able to put “margin-top: auto” on that button so that all the buttons line up at the bottom of the card. In this example the first card is the tallest, so all of the buttons would match that button’s height.

However, the only way I can figure out how to do that is to grab the “Card-Details” container, and give it a minimum height. It ends up being an arbitrary number and seems like a haphazard solution.

What I really need is for that inner container to “stretch” to fill up the entire height of its parent.

What’s the best way to solve this riddle with GenerateBlocks? I run into this all the time and can never seem to land on a proper solution!

Thank you!

2 Likes

This CSS fixes the issue… but having to set a height manually seems like a “hack” and a responsive nightmare.

1 Like

Hey Kyle,

I love the GB grid but this is one of those seemingly simple things I’ve struggled with as well, especially using the new query loop block where cards of this style are a very common requirement. I’ve actually already created a github issue/feature request for this very problem here: Query loop/grid - ability to control flex alignment of elements inside gb-inside-container · Issue #639 · tomusborne/generateblocks · GitHub

As for a solution in the meantime, the best solution I’ve found is to give the parent container a css class so it becomes a flex item in its own right, by default this will allow the inner-container to stretch full height. Then I target the inner-container to also become a flex-item with the flex-direction: column; set. With these two rules in place you can then target a GB button-wrapper inside to have margin-top: auto; to push to the bottom.

Obviously a bit of extra css work, but I’ve set up some reusable utility classes for this purpose to make it easier to target containers when needed. I really hope the GB team can action this request as seems to be an obvious limitation currently which has become more apparent with the query loop.

Hope this helps?