2026年5月20日

WordPressのCSSグリッドレイアウトを使う方法

テーマ・デザイン

はじめに

CSSグリッドはWordPressテーマのレイアウト実装に最適です。投稿一覧のカードグリッド・コンテンツとサイドバーの2カラム・フッターの3カラムなど、かつてはFloatやFlexboxで複雑に実装していたレイアウトを数行のCSSで実現できます。

症状・原因

投稿一覧をカード型グリッドで表示したい
レスポンシブで列数を自動調整したい
サイドバーとコンテンツのレイアウトを組みたい
マガジン風の不均等グリッドを作りたい

解決手順

ステップ1：基本的な投稿カードグリッド

/* 自動的に列数が調整されるレスポンシブグリッド */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* 列数を固定する場合 */
.post-grid--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .post-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .post-grid--3col {
        grid-template-columns: 1fr;
    }
}

ステップ2：コンテンツ＋サイドバーレイアウト

/* サイドバー付きレイアウト */
.site-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas:
        "main sidebar";
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-main    { grid-area: main; }
.site-sidebar { grid-area: sidebar; }

/* サイドバーなしページでメインを全幅に */
.no-sidebar .site-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
}

@media (max-width: 768px) {
    .site-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "sidebar";
    }
}

ステップ3：マガジン風グリッド（注目記事を大きく）

/* 最初の記事を2倍の幅に */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.magazine-grid .card:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 768px) {
    .magazine-grid {
        grid-template-columns: 1fr;
    }
    .magazine-grid .card:first-child {
        grid-column: span 1;
        grid-row: span 1;
    }
}

PHPテンプレート側：

// archive.php
<div class="magazine-grid">
    <?php
    $count = 0;
    while (have_posts()) : the_post();
        $count++;
        get_template_part('template-parts/card', null, [
            'is_featured' => ($count === 1),
        ]);
    endwhile;
    ?>
</div>

ステップ4：フッターのグリッドレイアウト

/* フッター：3等分 */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 3rem 0;
}

/* フッター：ロゴ幅広＋2カラム */
.footer-grid--asymmetric {
    grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 600px) {
    .footer-grid,
    .footer-grid--asymmetric {
        grid-template-columns: 1fr;
    }
}

ステップ5：グリッドアイテムのカード共通スタイル

.card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card__body {
    flex: 1; /* フッターを下に揃えるため */
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.card__footer {
    margin-top: auto; /* 常にカード下部に配置 */
    padding-top: 0.75rem;
    font-size: 0.85rem;
    color: #50575e;
}

注意事項

auto-fill はコンテナに空のセルを残し、auto-fit は空セルを折りたたみます。1行のみのグリッドでは auto-fit の方が自然なレイアウトになることが多いです
gap プロパティは旧称 grid-gap で同じ意味ですが、gap を使うことを推奨します
IE11 はCSSグリッドに部分対応ですが、-ms-grid プレフィックスが必要で仕様が異なります。IE11サポートが不要なら気にする必要はありません

まとめ

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) で列数が自動調整されるレスポンシブグリッドが完成します。コンテンツ＋サイドバーは grid-template-areas で名前付き配置、マガジン風は :first-child { grid-column: span 2 } で特定アイテムを大きく表示できます。

Post Views: 15