グリッドレイアウトはコンテンツを構造的でモジュラーな形式に整理し、視覚的な調和を生み出します。カラム数、ギャップ、アイテムサイズを正確に指定することで、AIは毎回一貫した洗練されたグリッドを生成できます。
指定すべき主要パラメータ
すべてのグリッドレイアウトプロンプトで、以下の質問に答えましょう。
- 各ブレークポイント（デスクトップ、タブレット、モバイル）でのカラム数はいくつか？
- アイテム間のギャップ（水平・垂直）はどのくらいか？
- アイテムの高さは均一か、それとも自然なアスペクト比を維持するか？
- 標準セルより幅広または高いアイテムはあるか？
- グリッドアイテムの最小・最大サイズはいくつか？
グリッドレイアウトのテンプレート
カードグリッド（商品またはポートフォリオ）
Design a product grid with:
- 4 cards per row on desktop (1024px+)
- 2 cards per row on tablet (768px)
- 1 card per row on mobile (below 640px)
Each card: product image, name, price, and an add-to-cart button that appears on hover.
Gap: 24px between all cards. Rounded corners (8px) on each card.マソンリーグリッド
Create a masonry-style image gallery where images maintain their original aspect ratios
but align to a column grid. Use a 3-column layout on desktop and 2 columns on mobile.
Include:
- Lazy loading for images below the fold
- A lightbox overlay that shows the full image when clicked
- A subtle hover overlay with the image titleフィーチャーグリッド
Design a features grid with:
- 3 columns on desktop, 2 on tablet, 1 on mobile
Each feature card:
- Icon centered at the top (48px, primary color)
- Bold heading below the icon
- 2–3 line description in gray
Use consistent icon style and spacing (24px padding inside each card).ダッシュボードメトリクスグリッド
Create a metrics dashboard grid with:
- Top row: 4 small KPI cards (1 column each) — metric value, label, and trend indicator
- Middle: 1 large chart card spanning 2 columns, 2 rows
- Bottom row: 2 medium cards each spanning 1 column
Gap: 16px between all cells. Each card: white background, 1px gray border, 12px border-radius.テンプレートエリアを使った高度なダッシュボード
Create a responsive grid dashboard using CSS grid-template-areas.
- Main metrics card: spans 3 columns, 2 rows
- Secondary stat cards: 1x1 each, filling the right column
- Activity feed: spans full width at the bottom
Use named template areas for clear layout control.グリッドとレスポンシブの参考表
| ブレークポイント | 標準カラム数 | 標準ギャップ |
|---|---|---|
| デスクトップ (1024px+) | 3〜4 | 24px |
| タブレット (768px) | 2 | 16px |
| モバイル (640px未満) | 1 | 12px |
グリッド向けTailwind CSSリファレンス
Tailwind CSSを使ってプロンプトする場合は以下を参考にしてください。
Use Tailwind CSS classes:
- grid-cols-1 on mobile
- sm:grid-cols-2 on tablet
- lg:grid-cols-4 on desktop
- gap-6 between items
- p-4 inside each card