[Resolved] Query Loop > Grid > Posts: Equal Height?

[Tom]

Title sort of explains what I would like to accomplish.

• I have a page that contains a Query Loop that contains a Grid.
• Grid element is 50% – so there are two post elements per row.
• Can I make each post have the same height?
• They currently contain different amounts of information so one is usually “taller” than the other.
• I would like them to take on the height of the taller of each row.

If not – that is okay. I was just curious and did not see any corresponding ability.

Thank you!

[Ying]

Hi Tom,

1. Make sure the Grid block’s vertical alignment is set to Default.

2. Select the Container block (post template), set its height o 100% in the sizing panel.

For more info: https://docs.generateblocks.com/article/equal-height-grid-containers/

[Tom]

Ying,

If you would take a look here – I tried with no success.

Look Here

[Ying]

Oh you have another Grid inside the post template!

If you set a background color for the post template container, you should be able to see all the post templates are the same height already.

Based on your layout, set the post template container to display: flex, and the Grid containers inside the post template container to height 100% as well.

[Tom]

Do I ceate a style for this? I could not find a way to do that in settings?

set the post template container to display: flex

[Ying]

Does the container still a legacy container (if you can still see the inner container width)?

If so, you can switch it to a new container to see the new options.

The post template container is a Grid container, you can choose Enable new system only when converting it.
https://docs.generateblocks.com/article/migrating-container-legacy-layout/

For more info about the layout panel of GB’s new system:
https://docs.generateblocks.com/article/layout-options-overview/

Sizing panel of GB’s new system:
https://docs.generateblocks.com/article/sizing-options-overview/

[Tom]

Got it all worked out Ying – thanks!
Turned legacy off and then simplified the container structures.

I may have some more questions regarding simplifying the containers – but if I can’t figure it out myself, I will reach out.

Thank you!

[Tom]

Another related question

The Header in my query loop does not seem to be wrapping. It screws up the alignment in longer titles.

See This Link

ALSO – I have the buttons in a container by themselves. Is there a way to get the “Apply Now” button to be the same width as the Job Description Button?

Thank you!

[Ying]

The Header in my query loop does not seem to be wrapping.

This wrap is using the CSS property flex-wrap, It wraps multiple child elements, but it does NOT wrap itself(in your case – headline text).

To learn more about how it works:
https://docs.generateblocks.com/article/layout-options-overview/#flex

Some of your Grid containers don’t have the width set, if you set them all to 50%, they should not wrap and look like this:
https://www.screencast.com/t/kAJTqqcITX

[Tom]

Perfect – thank you!

[Ying]

No problem 🙂

[Author]

Posts