grid

Le skill Copier

# 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

Comment l’installer Copier

Claude Code / Claude Desktop

1. Create a folder named after the skill inside your skills directory:
   - Claude Code: `~/.claude/skills/<skill-name>/`
   - A project-local skill: `<project>/.claude/skills/<skill-name>/`
2. Save the text below as `SKILL.md` in that folder, keeping the
   `---` frontmatter block at the top — the `name` and `description`
   fields are what make the skill discoverable.
3. Restart Claude Code, or run `/skills` to confirm it is listed.

The skill loads only when its `description` matches what you are doing,
so a precise description matters more than a long body.

Ça a marché pour vous ?

D’où ça vient

2025 kostja94