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:

GenerateBlocks Grid
GenerateBlocks Grid

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:

GenerateBlocks Grid - Distributed vertical space
GenerateBlocks Grid – Distributed vertical space