Grid

---
name: grid
description: When the user wants to design, optimize, or audit grid layouts for content display. Also use when the user mentions "grid layout," "grid design," "multi-column grid," "CSS grid," "responsive grid," "card grid," "product grid," or "feature grid."
metadata:
  version: 1.0.0
---

# Components: Grid Layout

Guides grid layout design for equal-hierarchy, multi-column content display. Grids display multiple items with equal emphasis; space-efficient and scannable. Used for products, templates, tools, features, blog indexes, and galleries.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## When to Use Grid

| Use grid when | Use list when |
|---------------|---------------|
| Visual content (images, thumbnails) | Text-heavy; scan by title |
| Equal emphasis across items | Compact; many items; dense info |
| Products, templates, gallery, features | Blog index, docs, search results |
| Browsing, discovery | Reading, scanning |

See **list** for list layout; **card** for card structure within grid.

## Grid Structure

| Element | Purpose |
|---------|---------|
| **Columns** | 1–4+ columns; adapt to viewport |
| **Gap** | Consistent spacing between items |
| **Items** | Equal or proportional sizing |
| **Responsive** | 1 col mobile → 2–4 cols desktop |

## Implementation

- **CSS Grid**: `repeat(auto-fill, minmax(min, 1fr))` or `repeat(auto-fit, minmax())` for fluid columns
- **Breakpoints**: e.g., 1 col <768px; 2 cols 768–1024px; 3–4 cols >1024px
- **Consistency**: Same padding, aspect ratios across items; see **card** for card structure

## Best Practices

| Principle | Practice |
|-----------|----------|
| **Equal hierarchy** | Items compete equally; no single dominant item |
| **Consistent sizing** | Same card/item dimensions in grid |
| **Gap consistency** | Uniform gap (e.g., 16px, 24px) |
| **No layout shift** | Reserve space for images; avoid CLS |

## Responsive

- **Mobile**: Single column; full-width items
- **Tablet**: 2 columns; touch targets ≥44×44px
- **Desktop**: 3–4 columns; hover states OK

## Infinite Scroll

If using infinite scroll with grid: crawlers cannot access content loaded on scroll. Provide paginated component pages for SEO-critical content. See **site-crawlability** for search-friendly implementation.

## Related Skills

- **site-crawlability**: Infinite scroll SEO; paginated component pages
- **card**: Card structure within grid; product, template, tool cards
- **list**: List layout vs grid; when to use each
- **masonry**: Masonry for varying heights (Pinterest-style)
- **carousel**: Carousel for slides/rotation; when grid is too dense
- **hero-generator**: Hero above; grid below for content sections
- **products-page-generator**: Product grid
- **template-page-generator**: Template grid
- **features-page-generator**: Feature grid