css-flexbox-grid

CSS Flexbox と Grid のスキル

最新の CSS レイアウトシステムを習得します。1 次元レイアウトには Flexbox、2 次元レイアウトには CSS Grid を使用します。

概要

このスキルでは、包括的なパラメーター検証と実践的な例を通じて、CSS レイアウト技法を原子的かつ集中的に解説します。

スキルのメタデータ

プロパティ	値
カテゴリ	レイアウト
複雑さ	中級〜上級
依存関係	css-fundamentals
連携エージェント	02-css-layout-master

使用方法

Skill("css-flexbox-grid")

パラメータースキーマ

parameters:
  layout_type:
    type: string
    required: true
    enum: [flexbox, grid, comparison, responsive]
    description: Layout system to explore

  pattern:
    type: string
    required: false
    enum: [centering, sidebar, card-grid, holy-grail, navbar, gallery]
    description: Common layout pattern

  include_responsive:
    type: boolean
    required: false
    default: true
    description: Include responsive adaptations

validation:
  - rule: layout_type_required
    message: "layout_type parameter is required"
  - rule: valid_pattern
    message: "pattern must be a recognized layout pattern"

対象トピック

Flexbox

• コンテナープロパティ：display、flex-direction、flex-wrap
• 配置：justify-content、align-items、align-content
• アイテムプロパティ：flex-grow、flex-shrink、flex-basis
• gap、order、個別の配置

CSS Grid

• グリッドテンプレート：列、行、領域
• グリッド配置：ライン、スパン、名前付き領域
• auto-fit、auto-fill、minmax()
• subgrid と masonry（対応している場合）

レスポンシブパターン

• モバイルファーストのアプローチ
• ブレークポイント戦略
• コンテナークエリーとの統合
• clamp() を使用した流動的なレイアウト

再試行ロジック

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000
  retryable_errors:
    - TIMEOUT
    - RATE_LIMIT

ロギングと可観測性

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  log_parameters: true
  metrics:
    - invocation_count
    - pattern_usage
    - layout_type_distribution

クイックリファレンス

Flexbox チートシート

.container {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;          /* nowrap | wrap | wrap-reverse */
  justify-content: center;  /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;      /* flex-start | flex-end | center | stretch | baseline */
  gap: 1rem;
}

.item {
  flex: 1 1 auto;          /* grow shrink basis */
  align-self: flex-start;
  order: 0;
}

Grid チートシート

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 1rem;
}

.item {
  grid-column: 1 / 3;      /* start / end */
  grid-row: span 2;
  grid-area: header;
}

判断基準表

Need 2D control?
├─ YES → CSS Grid
└─ NO
    ├─ Content determines size? → Flexbox
    ├─ Equal sizing needed? → Grid
    └─ Simple row/column → Flexbox

よく使われるパターン

あらゆる要素を中央に配置

/* Flexbox centering */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid centering */
.grid-center {
  display: grid;
  place-items: center;
}

レスポンシブなカードグリッド

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

サイドバーレイアウト

.sidebar-layout {
  display: grid;
  grid-template-columns: minmax(200px, 25%) 1fr;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}

テストテンプレート

describe('CSS Flexbox Grid Skill', () => {
  test('validates layout_type parameter', () => {
    expect(() => skill({ layout_type: 'invalid' }))
      .toThrow('layout_type must be one of: flexbox, grid...');
  });

  test('returns flexbox properties for flexbox type', () => {
    const result = skill({ layout_type: 'flexbox' });
    expect(result).toContain('display: flex');
    expect(result).toContain('justify-content');
  });

  test('includes responsive code when flag is true', () => {
    const result = skill({
      layout_type: 'grid',
      pattern: 'card-grid',
      include_responsive: true
    });
    expect(result).toContain('@media');
  });
});

エラー処理

エラーコード	原因	復旧方法
INVALID_LAYOUT_TYPE	不明なレイアウトタイプです	有効な選択肢を表示します
INCOMPATIBLE_PATTERN	パターンがレイアウトタイプに適合しません	代替案を提案します
MISSING_DEPENDENCY	基礎知識が理解されていません	css-fundamentals へのリンクを表示します

関連スキル

• css-fundamentals（前提条件）
• css-modern（コンテナークエリー）
• css-architecture（コンポーネントのレイアウトパターン）