入れ子レイアウトがもっと便利に！CSS Subgridの使い方

<div class="container">
    <div class="card">
        <div class="img"></div>
        <h2>タイトル1タイトル1タイトル1タイトル1</h2>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル2タイトル2</h2>
        <p>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル3タイトル3タイトル3</h2>
        <p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル4タイトル4</h2>
        <p>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。この書生というのは時々我々を捕えて煮て食うという話である。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル5タイトル5タイトル5タイトル5</h2>
        <p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル6タイトル6</h2>
        <p>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル7タイトル7タイトル7タイトル7</h2>
        <p>この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル8タイトル8タイトル8タイトル8タイトル8</h2>
        <p>その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル9タイトル9</h2>
        <p>のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
    <div class="card">
        <div class="img"></div>
        <h2>タイトル10タイトル10タイトル10タイトル10</h2>
        <p>どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。</p>
        <div class="button">
            記事を見る
        </div>
    </div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5つのカラムを作成 */
    grid-template-rows: auto;
    gap: 50px; /* カード間の隙間 */
}

.card {
    display: grid;
    grid-template-rows: subgrid; /* ここでSubgridを使用 */
    grid-row: span 4; /* 4行分のスペースを占めるように調整 */
    gap: 20px; /* カード間の隙間も親要素を継承しているので上書き */
}

grid-template-rows: subgrid;
grid-template-columns: subgrid;

grid-row: span 4;
grid-column: span 4;