Limit listing boxes to a certain height

[quickbzz2024]

Hi everyone,

I’m working on customizing my HivePress site and I’m trying to make each listing column the same height, regardless of the content inside. Here’s my setup:

I have listings displayed in a grid layout, with each listing contained in a .hp-grid__item element. I tried setting display: flex on the parent container (.hp-grid) and height: 100% on each .hp-listing item to make them equal in height, but it’s not working as expected. Here’s the code I’ve used so far:

.hp-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.hp-grid__item {
    flex: 1 1 25%;
    box-sizing: border-box;
    padding: 10px;
}

.hp-listing {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.hp-listing__content {
    flex-grow: 1;
}

I’d prefer CSS-only solutions, if possible, but I’m open to minor template changes if needed.!