grid
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." For cards layout, use card.
npx skills add kostja94/marketing-skills --skill grid --agent cursor
Same command for any agent — swap --agent for claude-code, codex, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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**:
- When to Use Grid
- Grid Structure
- Implementation
- Best Practices
- Responsive
- Infinite Scroll
- Related Skills
What does the grid skill do?
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." For cards layout, use card.
How do I install it?
Run `npx skills add kostja94/marketing-skills --skill grid --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From kostja94/marketing-skills, a repository with 848 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.