Grid Layout Prompts

Grid layouts organize content into a structured, modular format that creates visual harmony. Knowing exactly what to specify — column counts, gaps, and item sizing — means AI produces consistent, polished grids every time.

---

Key Parameters to Specify

Every grid layout prompt should answer these questions:

1. How many columns at each breakpoint (desktop, tablet, mobile)?
2. What is the gap between items (horizontal and vertical)?
3. Do items have equal heights, or do they maintain their natural aspect ratio?
4. Are any items wider or taller than the standard cell?
5. What is the minimum/maximum size of a grid item?

---

Grid Layout Templates

Card Grid (Product or Portfolio)

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.

---

Masonry Grid

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

---

Feature Grid

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).

---

Dashboard Metrics Grid

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.

---

Advanced Dashboard with Template Areas

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.

---

Grid + Responsive Reference

Breakpoint	Typical columns	Typical gap
Desktop (1024px+)	3–4	24px
Tablet (768px)	2	16px
Mobile (below 640px)	1	12px

---

Tailwind CSS Reference for Grids

When prompting with 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

---