Skip to content

Instantly share code, notes, and snippets.

@MariaJackson1
Last active August 8, 2022 20:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save MariaJackson1/2af6853553440e5c64d2f188f98ba7b4 to your computer and use it in GitHub Desktop.
Save MariaJackson1/2af6853553440e5c64d2f188f98ba7b4 to your computer and use it in GitHub Desktop.
Equal Column Height
https://generatepress.com/forums/topic/using-flexbox-for-equal-height-blocks-columns/
1. Select grid block
2. Give it css class flex-align
3. Add this css to make all the grid items in the grid a flex column:
.flex-align .gb-inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
4. Now you can apply flex adjustments eg.
/* Force all elements below first item ( Heading ) to bottom of column */
.flex-align .gb-inside-container>*:first-child {
margin-bottom: auto;
}
or
/* Force last item ( button) to bottom of column */
.flex-align .gb-inside-container>*:last-child {
margin-top: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment