Archived topic
GPP 2.0 - Equal heights for custom blog layout
6 replies · Started by George on April 2, 2021
I am using the new content template block element to create a custom post grid on the blog page. I've set the blog layout as 3 columns from the Customizer and created my post template block. Is there a way to have equal height blocks so that the height of blocks in a row is equal to the highest block? Like the grid in the second URL, I am attaching.
Hi George,
You could try this CSS:
.site-main .generate-columns-container:not(.masonry-container) .gb-container .gb-inside-container {
min-height: 396px;
background-color: #fff;
justify-content: flex-start !important;
}The min-height is based on the longest container on page 1.
Let me know if it works for you :)
It works but it's not dynamic in the sense that you define a minimum height. I am trying to find a more streamlined solution like in the example I attached in which heights are automatically adjusted according to the content. I tried copying the flex settings from there but I was not successful.
Hi there,
try this CSS:
.generate-columns {
display: flex;
}
.generate-columns > .gb-container > .gb-inside-container *:last-child {
flex: 1;
}Hi David. Doesn't seem to be working.
Scratch that, I had to set a background color to the container. It works great, David, thank you!
Glad to be of help
