Fill vertical space in a grid container
You might bump into an issue where you have a grid with info boxes inside and struggling to bottom-align the buttons, like so:
The above Grid has 3 inner columns but currently, there is no way to distribute the columns’ vertical space and bottom-align the buttons. To achieve the required result select the Grid wrapper and give it an additional CSS class of, let’s say align-bottom-button
.
Then, use the following CSS:
.align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container { display: flex; flex-direction: column; height: 100%; } .align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container>.gb-button-wrapper { margin-top: auto; }
That should fix the issue:
Very nice. Thank you.
No problem, Maria, glad it was useful.
Thanks George! Used this today!
Glad it was useful!
Thank you so much! Been wanting this for such a long time and just could not make it work.
Glad, it’s working for you!