ブログ一覧ページの作成

ブログ一覧ページは、共通の記事カードを組み立てるページです。

ページ構成

<div class="c-page-kv c-page-kv--blog">
    <div class="l-container-l">
        <h1 class="c-title-level1 c-title-level1--white">blog & news</h1>
    </div>
</div>

<!-- c-posts c-posts--col3 -->
<!-- c-pagination -->
<!-- c-instagram -->

記事カードはトップと同じ c-posts を使います。差分はページ見出しと件数だけ、という状態を目指します。

グリッド

ベースのグリッドは .c-posts 側です。--col3 は列数の上書きです。

.c-posts {
    display: grid;
    gap: 40px 30px;
    grid-template-columns: repeat(1, 1fr);
}

@media (width >= 500px) {
    .c-posts--col3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width >= 768px) {
    .c-posts--col3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px 30px;
    }
}

一覧の下に c-pagination、さらに下に c-instagram を置きます。