Grid
- 771 installs
- 787 repo stars
- Updated June 9, 2026
- kostja94/marketing-skills
grid is a Claude Code frontend skill that guides creation, optimization, and auditing of CSS grid layouts for developers building product grids, feature displays, galleries, and responsive multi-column interfaces.
About
grid is version 1.0.1 in kostja94/marketing-skills under Components: Grid Layout. It helps developers design equal-hierarchy, multi-column grids for products, templates, tools, features, blog indexes, and galleries where items need scannable, space-efficient presentation. The skill triggers on grid layout, CSS grid, responsive grid, card grid, product grid, and feature grid requests, and points card-specific work to the card skill. Developers reach for grid when structuring marketing or app UI surfaces that display many peers at once rather than hierarchical navigation. It emphasizes responsive behavior and layout audits for content-heavy SaaS marketing pages.
- Guides equal-hierarchy multi-column content layouts that are space-efficient and scannable
- Helps choose grid over list based on visual content, equal emphasis, and discovery use cases
- Covers columns (1–4+), consistent gaps, item sizing, and responsive behavior from mobile to desktop
- Provides structure for products, templates, tools, features, blog indexes, and image galleries
- Includes explicit comparison table: when to use grid versus list layouts
Grid by the numbers
- 771 all-time installs (skills.sh)
- +7 installs in the week ending Jul 25, 2026 (Skillselion tracking)
- Ranked #488 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/kostja94/marketing-skills --skill gridAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 771 |
|---|---|
| repo stars | ★ 787 |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 9, 2026 |
| Repository | kostja94/marketing-skills ↗ |
How do you build responsive CSS product grids?
Get expert guidance on creating, optimizing, and auditing CSS grid layouts for product grids, feature displays, galleries, and responsive multi-column interfaces.
Who is it for?
Frontend developers shipping marketing or app pages with product catalogs, feature matrices, or gallery indexes needing equal-weight columns.
Skip if: Backend API design, database modeling, or card-component micro-layout tasks better handled by the card skill alone.
When should I use this skill?
The user mentions CSS grid, product grid, responsive multi-column layout, feature grid, or gallery grid design.
What you get
CSS grid layout spec, responsive column rules, and audited grid structure for content displays.
- Grid layout specification
- Responsive column rules
By the numbers
- Skill metadata version 1.0.1
Files
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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
When should developers use the grid skill?
The grid skill applies when designing or auditing CSS grid layouts for product grids, feature displays, galleries, or responsive multi-column interfaces. Version 1.0.1 targets equal-hierarchy, scannable content blocks on SaaS marketing pages.
Does grid handle individual card components?
grid focuses on multi-item grid containers and responsive column structure. For card-specific layout guidance, the skill recommends using the separate card skill instead.
Is Grid safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.