[Resolved] Grid items aren’t equal height

[Andrew]

I have three containers arranged side-by-side in a grid. Each of these containers contains a ‘hero’ card which should be the same height across each column.

I came across this code snippet, and although it seems to target the last child element (the date text), it doesn’t seem to pin it to the bottom of the container. I’m assuming there’s something specific to my HTML which is preventing this, but haven’t been able to narrow down what exactly.

[Fernando]

Hi Andrew,

There will be an upcoming GB update that should allow you to achieve that with no code needed. The Alpha update should come out hopefully by the end of the week.

Your structure seems odd as well. For your layout, you shouldn’t need another GB Grid Block inside each column as well. Can you try recreating it without the inner Grid Block?

[Andrew]

Hi Fernando,

That’s great news — I’ll keep an eye out! In the meantime, is the CSS from the linked post an approach that should work?

In regards to the structure, I may be missing something but I couldn’t find a way to simplify this.

As you probably saw, in each column there’s one Query Loop Block for the featured post, and below that there’s another for two additional posts. The Query Loop Blocks in each column have different Taxonomies parameters (to filter to specific categories). If I’m understanding correctly, each Query Loop block needs to contain a Grid Block (hence the inner Grid Blocks).

[David]

Hi there,

Aside from those additional grids from the query loop making the CSS more complicated, the methods above work if the parent grid columns only have a single element within.
When each column has multiple elements within, then each column mush have a) the same number of elements stacked inside and b) only one of those elements has a variable height. IF all those heights are variable then theres no way to make their heights match.

So the only thing here that you can do is to edit the post template blocks in each of those query loops and give them the same Minimum Height.

[Andrew]

Hi David,

Thank you for the explanation.

On point A: the three columns will all have the same number of elements. At the moment, they are only different because there aren’t enough posts on the site yet. I have added some dummy posts to correct this in the meantime.

On point B: if it simplifies things, I’d be happy with matching only the height of the featured post containers. I’m less concerned about the two containers below matching.

I’ve included in the private information an example of another site which achieves the layout I’m going for. They seem to have set a fixed height for the containers, and truncate the text as the width narrows. If this approach can be achieved with GB, I’d love to hear how.

[David]

The example URL you provided, they use the same method i suggested above and have given the first article in each column a minimum height of 360px.

[Andrew]

Just gave this a try in combination with limiting the number of lines in the post heading (based on your suggestion here), and it works great. Thank you!

Before I mark as resolved, I noticed that the ellipsis isn’t appearing. Instead, once the heading extends to three lines, the wrapped words don’t show but there isn’t an ellipsis to indicate as such.

This is what my CSS looks like:

.my-custom-class .gb-inside-container h2 {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    text-overflow: ellipsis;
}

[David]

Try this instead:

.my-custom-class .gb-inside-container h2 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[Andrew]

Perfect, thanks David!

[David]

You’re welcome

[Author]

Posts