subgrid

by Artem Borovikov

HTML

<div class="grid">
    <div class="grid-item">
        <article class="article" >
            <header class="card-header" >
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing.</h2>
            </header>
            <main>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur sequi sunt cumque quos similique, culpa.</p>
            </main>
            <footer class="card-actions" >
                <p>Lorem ipsum dolor sit.</p>
            </footer>
        </article>
    </div>
    
    <div class="grid-item">
        <article class="article" >
            <header class="card-header" >
                <h2>Lorem ipsum dolor sit.</h2>
            </header>
            <main>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </main>
            <footer class="card-actions" >
                <p>Lorem ipsum dolor sit.</p>
            </footer>
        </article>
    </div>
    
    <div class="grid-item">
        <article class="article" >
            <header class="card-header" >
                <h2>Lorem ipsum dolor sit amet.</h2>
            </header>
            <main>
                <p>Lorem ipsum dolor sit amet.</p>
            </main>
            <footer class="card-actions" >
                <p>Lorem ipsum dolor sit.</p>
            </footer>
        </article>
    </div>
</div>

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.grid-item {
    opacity: 0.5;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    border: 1px solid yellow;
    background: yellow;
}


.article {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 10px;
    padding: 10px 15px 15px;
}

.article h2,
.article p {
    margin: 0;
}