How to set consistent height for grid View elements

This support ticket is created 3 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

This topic is split from https://toolset.com/forums/topic/view-block-in-hook-has-lost-css-style/

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Toolset Blocks

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 3 years, 11 months ago.

Assisted by: Christian Cox.

Author

Posts

December 3, 2020 at 4:10 pm #1864847

michaelW-23

...I now have a related question about consistent height for each grid column. The headings are not a consistent length. Should I apply "min-height" css to that field, or is there a better way using flex or something?

The View can be seen at hidden link

December 3, 2020 at 7:37 pm #1865035

Christian Cox

Hi, not only are the heading heights inconsistent, the excerpt heights are inconsistent. If the images are not cropped, those could be variable as well if the image content is not created in the correct aspect ratio. So you have multiple elements in each grid cell that are potentially of variable height. I don't know an easy way to solve it with flexbox so that the excerpts are all top-aligned, and the Learn More buttons are all top-aligned, and all the grid cells have the same height. The grid uses a CSS Grid layout, not flexbox. As you mentioned, I think CSS min-height applied to multiple container elements is going to be the most effective solution here since there are multiple variable heights involved.

The topic ‘[Closed] How to set consistent height for grid View elements’ is closed to new replies.