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