グリッドレイアウトのプロンプト

読了 5分＋実践 20分

商品一覧、ダッシュボード、ポートフォリオ、メディアギャラリーを作るすべての人。

CSSグリッドが何かを基本的に理解していること。コーディングは不要です。

グリッドレイアウトはコンテンツを構造的でモジュラーな形式に整理し、視覚的な調和を生み出します。カラム数、ギャップ、アイテムサイズを正確に指定することで、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

ベントレイアウトのプロンプト

リストレイアウトのプロンプト