GeneratePressのアーカイブをグリッドに

GeneratePressのアーカイブは、article要素が連なった形でHTML出力されています。デフォルトではそのarticle要素は縦に積まれていて、ちょうどリストのように表示されますが、これをいわゆる「グリッドレイアウト」にしたい方も多いと思います。

これをCSSだけで実現してみましょう。カスタマイザーの追加CSSに以下を足してみてください。

/* アーカイブ・ホームページ グリッドレイアウト */

/* グリッドコンテナの基本設定
   :is() は複数のセレクタをまとめて書ける便利な機能です
   body.home または body.archive のときに適用されます */
:is(body.home, body.archive) .site-main {
  display: grid;
  grid-template-columns: 1fr; /* 最初は1列 */
  gap: 20px; /* 要素間の間隔 */
}

/* ヘッダーとナビゲーションを全幅にする
   grid-column: 1 / -1 は「最初の列から最後の列まで」という意味です
   これによってヘッダーとナビが全幅に広がります */
:is(body.home, body.archive) .site-main > :is(header, nav) {
  grid-column: 1 / -1;
}

/* ヘッダーと記事の下の余白をなくす */
:is(body.home, body.archive) .site-main > :is(header, article) {
  margin-bottom: 0;
}

/* 記事内部の高さを親の高さに合わせる */
:is(body.home, body.archive) .site-main > article .inside-article {
  height: 100%;
}

/* タブレット以上の幅：2列レイアウト */
@media (min-width: 768px) {
  :is(body.home, body.archive) .site-main {
    grid-template-columns: repeat(2, 1fr); /* 2列、幅は同じ */
  }
}

/* デスクトップ以上の幅：3列レイアウト */
@media (min-width: 1024px) {
  :is(body.home, body.archive) .site-main {
    grid-template-columns: repeat(3, 1fr); /* 3列、幅は同じ */
  }
}