Grid items with different content heights & aligned bottom block

If you have grid items in a row with different height contents, you may want to pin the last block (a button, for example) to the bottom of the grid items so they all align in the row. This is a popular look with pricing tables, for example.

As of right now, there is no option for this, but it can be done with some simple CSS.

First, give your Container block a custom class: my-custom-class.

Then, add the following CSS:

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

.my-custom-class .gb-inside-container > *:last-child {
    margin-top: auto;
}

This will make sure the last block in the containers align across the row regardless of the content heights.

2 Likes