Grid
Design or audit responsive CSS grid layouts for product, feature, and gallery pages that need equal visual weight per item.
Overview
Grid is an agent skill for the Build phase that guides responsive grid layout design for equal-hierarchy, multi-column marketing and product surfaces.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill gridWhat is this skill?
- Grid vs list decision table for visual/browse vs text-heavy scan use cases
- Column, gap, item, and responsive breakpoint structure guidance
- Use cases: products, templates, tools, features, blog indexes, galleries
- Points to companion list and card skills for dense indexes and card anatomy
- 1–4+ column patterns scaling from mobile single column to desktop
- 4 structural elements: columns, gap, items, responsive
Adoption & trust: 743 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your catalog or feature page looks like a messy stack because you have not chosen columns, gaps, and breakpoints for equal-weight items.
Who is it for?
Indie SaaS and ecommerce builders designing product grids, template galleries, or feature matrices on marketing sites.
Skip if: Pure data tables, long-form doc sidebars, or projects where list layout and title scanning are the primary pattern.
When should I use this skill?
When the user wants to design, optimize, or audit grid layouts, or mentions grid layout, CSS grid, responsive grid, product grid, or feature grid.
What do I get? / Deliverables
You leave with a grid structure spec—when to use grid vs list, column counts per viewport, and how it fits card components—for implementation in CSS Grid or your framework.
- Grid vs list recommendation with rationale
- Column and breakpoint layout specification
- Pointers to card/list patterns for nested structure
Recommended Skills
Journey fit
How it compares
Layout and composition skill for marketing pages—not a CSS framework install or MCP server.
Common Questions / FAQ
Who is grid for?
Solo founders and marketers pair-programming with an agent on landing pages, directories, and storefront UIs that show many items at once.
When should I use grid?
Use it in Build while designing product, template, tool, feature, or gallery grids; invoke when you say grid layout, responsive grid, or multi-column content display.
Is grid safe to install?
It is documentation-style guidance; review the Security Audits panel on this page and treat install source like any skills.sh package.
SKILL.md
READMESKILL.md - Grid
# 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