CSS Grid（グリッドレイアウト）の基本と実装方法

CSS Grid（グリッドレイアウト）は、複雑なレイアウトをシンプルなコードで実現できる強力なレイアウト手法です。
Flexbox が「一方向（横または縦）」の整列に強いのに対し、Grid は「2次元（行と列）」の両方で配置をコントロールできます。

1 実装のポイント

• display: grid; を使ってグリッドコンテナを作る。
• grid-template-columns / grid-template-rows で列や行の数を設定。
• gap プロパティで要素間の隙間を簡単に調整。
• レスポンシブ対応も簡単で、repeat(auto-fit, minmax()) を使うと自動調整可能。

2 HTML構造

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

3 汎用CSS

/* ------------------
 * Gridレイアウト用
 * ----------------*/

.grid-demo { /* デモ用コンテナ */
  display: grid; /* グリッドレイアウトを有効に */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 自動列配置 */
  gap: 20px; /* グリッド間の余白 */
  max-width: 900px; /* 最大幅 */
  margin: 40px auto; /* ページ中央寄せ */
  padding: 20px; /* 内側余白 */
  background: #fdfdfd; /* 背景 */
  border-radius: 10px; /* 角丸 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 軽い影 */
}
.grid-demo .grid-item { /* 各ボックス */
  background: linear-gradient(135deg, #6cf, #49b); /* グラデ背景 */
  color: #fff; /* 白文字 */
  font-weight: bold; /* 太字 */
  font-size: 1.4em; /* 大きめ文字 */
  text-align: center; /* 中央揃え */
  line-height: 120px; /* 高さ */
  height: 120px; /* 固定高さ */
  border-radius: 8px; /* 角丸 */
  transition: transform 0.3s, box-shadow 0.3s;
}
.grid-demo .grid-item:hover { /* ホバー効果 */
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

4 完成イメージ

以下はCSS Gridで作成したレイアウトの完成例です。

5 代用プラグイン

もしCSSでのグリッド指定が難しい場合、以下のプラグインで同様のレイアウトを構築できます。

• GenerateBlocks – ブロックエディタでグリッドを直感的に設定可能。
• Essential Blocks for Gutenberg – カラム・カード・グリッド機能を簡単に挿入可能。
• WPBakery Page Builder – クラシックエディタでも視覚的にレイアウト可能。

6 まとめ

CSS Gridは、柔軟で構造的なレイアウトをシンプルなコードで作ることができます。
メディアクエリをほとんど使わずにレスポンシブ対応できるのも魅力です。
特にカードレイアウトやギャラリーなど、整然としたデザインを実現したいときに最適です。