CSS Grid dengan Claude Code

CSS Gridでkompleksなlayoutを簡潔にimplementasi

CSS Grid モダンなlayout設計 中核.Claude Code 使えば、kompleksなgridlayout コード waktu singkat 正確 generate bisa dilakukan.

dasar的なgridlayout

> CSS Grid dengan dashboardlayout buatkan.
> header、sidebar、メインkonten、フッター 4領域 dengan 。

/* ダッシュボードレイアウト */
.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による自動layout

/* カードグリッド：自動的にカラム数を調整 */
.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  → 空のトラックを潰す（アイテムが伸びる） */

マガジンlayout

/* 雑誌風の不規則グリッド */
.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;
}

pemanfaatan 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;
}

名前付きラインを使った高度なlayout

.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 Gridanimasi

/* グリッドのアニメーション遷移 */
.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;
}

praktisなutilitasclass

/* グリッドユーティリティ */
.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; }

Summary

Untuk CSS GridはFlexboxと使い分けることで、あらゆるlayoutにdukunganできます。Claude Codeを使えば、subgridや名前付きラインなどの高度な機能も的確にimplementasiできます。メディアqueryと組み合わせてレスポンシブdukunganも忘れずに行いましょう。CSS Gridの詳細な仕様, lihat CSS Grid Layout Module Level 2.