Archived topic

Possible to Anchor Buttons to bottom of a container within a grid

3 replies · Started by Rebecca on June 22, 2022

Viewing posts 1–4 of 4

June 22, 2022 at 5:09 pm #2261791

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!

June 22, 2022 at 6:32 pm #2261815

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.

June 23, 2022 at 2:37 pm #2262721

Works perfectly!

Thank you so much Fernando.

June 23, 2022 at 3:57 pm #2262768

You’re welcome Rebecca! Glad that worked!

This archived topic is closed to new replies.

Start building better websites today.