グリッドレイアウト Grid Layout

CSS Gridを使って要素を行列に整列配置する基本的なレイアウトパターン。

使用場面: 商品一覧やギャラリーなど均等な格子状の配置 採用例: Pinterest, Unsplash

ライブデモ

1
2
3
4
5
6
7
8
9

ソースコード

<div class="demo-grid">
  <div class="demo-grid-item">1</div>
  <div class="demo-grid-item">2</div>
  <div class="demo-grid-item">3</div>
  <div class="demo-grid-item">4</div>
  <div class="demo-grid-item">5</div>
  <div class="demo-grid-item">6</div>
  <div class="demo-grid-item">7</div>
  <div class="demo-grid-item">8</div>
  <div class="demo-grid-item">9</div>
</div>
.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.demo-grid-item {
  padding: 24px; text-align: center; border-radius: 10px;
  background: color-mix(in srgb, var(--ui-primary) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--ui-primary) 20%, transparent);
  font-size: 18px; font-weight: 700; color: var(--ui-primary);
  transition: all 0.2s;
}
.demo-grid-item:hover {
  background: color-mix(in srgb, var(--ui-primary) 15%, #fff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

AIプロンプト

Basic 
CSS Gridを使ったグリッドレイアウトを作ってください。3カラムの均等な格子状に要素を配置します。
Custom 
以下の仕様でグリッドレイアウトを実装してください。
- レスポンシブ（モバイル1列、タブレット2列、PC3列）
- auto-fillとminmaxで自動列数調整
- プライマリカラー: #2563eb
- ホバー時にカードが浮き上がるエフェクト
- gap: 16px
- 特定のアイテムを2カラム/2ロウにスパン
Advanced 
アクセシビリティ対応のグリッドレイアウトを実装してください。
- CSS Grid subgridで整列されたコンテンツ
- container queriesでコンポーネントレベルのレスポンシブ
- フォーカス可能な要素の論理的な順序（DOMの順序とビジュアルの一致）
- prefers-reduced-motion対応（ホバーアニメーション無効化）
- ハイコントラストモード対応
- グリッドアイテムのドラッグ&ドロップ並び替え
- 仮想化による大量アイテムのパフォーマンス最適化
← カタログに戻る