How to install grid
npx skills add https://github.com/kostja94/marketing-skills --skill gridFull instructions (SKILL.md)
Source of truth, from kostja94/marketing-skills.
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." For cards layout, use card. metadata: version: 1.0.1
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))orrepeat(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
Related skills
More from kostja94/marketing-skills and the wider catalog.
grokipedia-recommendations
When the user wants to add recommendations, links, or content to Grokipedia. Also use when the user mentions "Grokipedia," "GEO wiki," "AI encyclopedia," "suggest Grokipedia article," "Grokipedia citation," "Grokipedia listing," "AI search citation," "GEO visibility," or "Grokipedia optimization." For multi-platform parasite SEO strategy, use parasite-seo. For broad AI search visibility, use generative-engine-optimization.
growth-funnel
When the user wants to plan growth using the AARRR framework, diagnose growth bottlenecks, or map actions across the customer lifecycle. Also use when the user mentions "growth funnel," "AARRR," "pirate metrics," "acquisition activation retention," "customer lifecycle metrics," or "growth framework." For retention tactics, use retention-strategy.
gtm-strategy
When the user wants to plan go-to-market strategy, GTM framework, or market entry. Also use when the user mentions "GTM," "go-to-market," "market entry," "new market," "repositioning," "PLG," "sales-led," "product-led," "marketing-led," "ICP," "buyer persona," "GTM motion," or "market expansion." For launch checklist, use product-launch.
heading-structure
When the user wants to optimize heading structure (H1-H6), fix heading hierarchy, or improve content structure. Also use when the user mentions "H1," "heading," "heading hierarchy," "content structure," "H2," "H3," "heading tags," "heading SEO," "multiple H1," or "heading structure." For SEO workflow, use seo-strategy.
hero-generator
When the user wants to design, optimize, or audit hero sections (above-the-fold main visual area). Also use when the user mentions "hero," "hero section," "hero area," "above the fold," "above the fold content," "landing hero," "main banner," "banner section," "first fold," "hero section design," "hero conversion," "split layout hero," "centered hero," or "hero alignment." For homepage, use homepage-generator.
homepage-generator
When the user wants to create, optimize, or audit the main site homepage (primary entry page). Also use when the user mentions "homepage," "main page," "home page," "hero section," "above the fold," "home page design," "homepage conversion," or "homepage structure." Not for paid campaign or ad landing pages—use landing-page-generator. For sitewide page planning, use website-structure.