CSS Grid：Claude Code 实战指南

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。