Equal cards height

How to align the content in a recurring component

Let's assume that our single component is a

<div class="card">
    <img src="/assets/img.webp" />
    <p><strong>Title</strong></p>
    <p>Sample description</p>
    <a>Read more</a>
</div>

Duplicating it with the production content, we will encounter the problem of different text heights relative to the neighboring component.

We will solve the problem by using the subgrid property. We apply display: grid to the parent, which is the component container.

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    column-gap: 1rem;
}

.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
}

Remember to check support in browsers before using.

Go back to Shorts