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