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 whenUse list whenVisual content (images, thumbnails)Text-heavy; scan by titleEqual emphasis across itemsCompact; many items; dense infoProducts, templates, gallery, featuresBlog index, docs, search resultsBrowsing, discoveryReading, scanning

See list for list layout; card for card structure within grid.

Grid Structure#

ElementPurposeColumns1–4+ columns; adapt to viewportGapConsistent spacing between itemsItemsEqual or proportional sizingResponsive1 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#

PrinciplePracticeEqual hierarchyItems compete equally; no single dominant itemConsistent sizingSame card/item dimensions in gridGap consistencyUniform gap (e.g., 16px, 24px)No layout shiftReserve 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