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를 참고하세요.