Archived topic

How To Vertically Align Multiple Grid Container Buttons

7 replies · Started by Brent Wilson on March 23, 2022

Viewing posts 1–8 of 8

March 23, 2022 at 4:37 pm #2165231

If I have a grid of side-by-side containers, and each container has a button below some text, how can I get the buttons to align vertically when the text above them may be different lengths? See screenshot for example of the issue.

https://pasteboard.co/pQNrskSZWACZ.png

March 23, 2022 at 5:13 pm #2165260

Hi Brent,

Any chance you can link us to the site in question and point us to where we should be looking at?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

March 23, 2022 at 5:27 pm #2165271

See private information section.

March 23, 2022 at 6:04 pm #2165281

Try this:

.gb-grid-wrapper.gb-grid-wrapper-88f8cde3 .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.gb-grid-wrapper.gb-grid-wrapper-88f8cde3 .gb-container > .gb-inside-container > *:last-child {
    margin-top: auto;
}

March 23, 2022 at 6:32 pm #2165290

That seems to work nicely!

So to apply this to other grids, I would just need to change the grid wrapper id portion of this CSS, right?

Thanks!

March 23, 2022 at 6:39 pm #2165296

So to apply this to other grids, I would just need to change the grid wrapper id portion of this CSS, right?

If the Grid structure is similar, then it's correct :)

March 23, 2022 at 6:40 pm #2165297

Thanks!

March 24, 2022 at 9:13 am #2166186

No problem :)

This archived topic is closed to new replies.

Start building better websites today.