Let’s take this price table as an example. The 3 price tables have different numbers of plan features, thus they come in with different heights.
How to make all the price tables the same height and all the sign-up buttons aligned at the bottom like this?
GenerateTips
1. settings for Grid block
a. Set the Grid block’s vertical alignmenet to Default, so that all the containers inside Grid would have the same height.
b. Set an additional CSS class for the Grid block so it would be easier to target using CSS, eg. price-tables.
2. Add custom CSS:
.price-tables> .gb-grid-column > .gb-container > .gb-inside-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.price-tables> .gb-grid-column > .gb-container > .gb-inside-container > *:last-child {
margin-top: auto;
}Please be noted
This CSS works only if the element you want to align to the bottom is a direct child of the Grid > Container, for your reference — buttons block in this case:
