Equal height on post grid columns

Sorry if this has been posted but I didn’t find any info. I am trying to make the columns of a post gird have the same height no matter how long the title and excerpt of each column is I want them to have same height in the bottom.

Hi @alexgr,

i think the only way to get this working properly is to limit the length of the title and excerpt, so they are equally long (easiest way) or maybe to calculate the height with javascript and change it, when the browser window gets resized.

You can limit the length with “:Number of Words” and maybe extend this with truncating the text via css, because words can be of different lengths.

root .dynamic:first-child {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

I tried to achieve this with flexbox properties, but that´s not working properly because the height get´s applied dynamically by isotope when resizing…

Regards,
timmse

Thank you Timmse for pointing me in the right direction.

I had a similar problem but with product listings in Woo not having equal title and so columns were messed up.

My fix was to apply this to the header class:

h2.woocommerce-loop-product__title {
  overflow-y: hidden;
  height: 5rem;
}