With subgrid a child grid uses the rows or columns of its parent grid. The classic use case is a row of cards where titles, descriptions and buttons line up across all cards, even when the text length is different.

HTML

<div class="lotgrafix-cards">
    <article class="lotgrafix-card">
        <h3>Short title</h3>
        <p>Short description.</p>
        <a href="#">Read more</a>
    </article>
    <article class="lotgrafix-card">
        <h3>A much longer title that wraps to two lines</h3>
        <p>A longer description that takes more space than the others.</p>
        <a href="#">Read more</a>
    </article>
</div>

CSS

.lotgrafix-cards {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) );
    gap: 20px;
}

.lotgrafix-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 10px;
}

How it works

• Each card spans three rows of the parent grid, one for each child.
• grid-template-rows: subgrid makes the card use those parent rows.
• Every title row takes the height of the tallest title, so all cards stay aligned.

Subgrid for columns

.lotgrafix-card {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
}