[Resolved] Possible to Anchor Buttons to bottom of a container within a grid

[Rebecca]

Hello!

I am working with a four column grid where every column ends with a button. Is there a way to set the last object in a container (in this case a button) to move to the bottom of the container?

I want the headlines to line up at the top and the buttons to be uniform at the bottom no matter how much text is in the middle of the columns. I am able to get the headlines aligned or the buttons, but never both.

Thanks!

[Fernando]

Hi Rebecca,

Try adding my-grid to the class list of the Grid Block as such: https://share.getcloudapp.com/5zurBeRd

Then, add this custom CSS in Appearance > Customize > Additional CSS:

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

.my-grid > .gb-grid-column > .gb-container > .gb-inside-container .wp-block-buttons {
    margin-top:auto;
}

Kindly let us know how it goes.

[Rebecca]

Works perfectly!

Thank you so much Fernando.

[Fernando]

You’re welcome Rebecca! Glad that worked!

[Author]

Posts