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.