Claude CodeでCSS Gridを完全マスターする方法【実践パターン集】

CSS Gridで複雑なレイアウトを簡潔に実装

CSS Gridはモダンなレイアウト設計の中核です。Claude Codeを使えば、複雑なグリッドレイアウトのコードを短時間で正確に生成できます。

基本的なグリッドレイアウト

> CSS Gridでダッシュボードレイアウトを作成して。
> ヘッダー、サイドバー、メインコンテンツ、フッターの4領域で。

/* ダッシュボードレイアウト */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* レスポンシブ：モバイルでは1カラム */
@media (width < 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 40px;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
}

auto-fill / auto-fitによる自動レイアウト

/* カードグリッド：自動的にカラム数を調整 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* auto-fit：アイテムが少ない場合にストレッチ */
.stretch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* 比較ポイント：
   auto-fill → 空のトラックを維持（アイテム幅固定）
   auto-fit  → 空のトラックを潰す（アイテムが伸びる） */

マガジンレイアウト

/* 雑誌風の不規則グリッド */
.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.magazine .featured {
  grid-column: span 2;
  grid-row: span 2;
}

.magazine .wide {
  grid-column: span 2;
}

.magazine .tall {
  grid-row: span 2;
}

Subgridの活用

/* Subgridでカード内の要素を揃える */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* タイトル、本文、フッターの3行 */
}

.card__title {
  align-self: start;
  font-size: 1.25rem;
  font-weight: bold;
}

.card__body {
  align-self: start;
}

.card__footer {
  align-self: end;
  border-top: 1px solid #eee;
  padding-top: 0.5rem;
}

名前付きラインを使った高度なレイアウト

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100%)
    [content-end] minmax(1rem, 1fr)
    [full-end];
}

.page > * {
  grid-column: content;
}

.page .full-bleed {
  grid-column: full;
}

.page .wide {
  grid-column: full;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

CSS Gridアニメーション

/* グリッドのアニメーション遷移 */
.animated-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s ease;
}

.animated-grid.collapsed {
  grid-template-columns: 0fr 1fr;
}

.animated-grid .sidebar {
  overflow: hidden;
  min-width: 0;
}

実践的なユーティリティクラス

/* グリッドユーティリティ */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-full { grid-column: 1 / -1; }

まとめ

CSS GridはFlexboxと使い分けることで、あらゆるレイアウトに対応できます。Claude Codeを使えば、subgridや名前付きラインなどの高度な機能も的確に実装できます。メディアクエリと組み合わせてレスポンシブ対応も忘れずに行いましょう。CSS Gridの詳細な仕様はCSS Grid Layout Module Level 2を参照してください。