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
1---
2name: grid
3description: When the user wants to design, optimize, or audit grid layouts for content display. Also use when the user mentions "grid layout," "grid design," "multi-column grid," "CSS grid," "responsive grid," "card grid," "product grid," or "feature grid." For cards layout, use card.
4metadata:
5 version: 1.0.1
6---
7
8# Components: Grid Layout
9
10Guides 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.
11
12**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.
13
14## When to Use Grid
15
16| Use grid when | Use list when |
17|---------------|---------------|
18| Visual content (images, thumbnails) | Text-heavy; scan by title |
19| Equal emphasis across items | Compact; many items; dense info |
20| Products, templates, gallery, features | Blog index, docs, search results |
21| Browsing, discovery | Reading, scanning |
22
23See **list** for list layout; **card** for card structure within grid.
24
25## Grid Structure
26
27| Element | Purpose |
28|---------|---------|
29| **Columns** | 1–4+ columns; adapt to viewport |
30| **Gap** | Consistent spacing between items |
31| **Items** | Equal or proportional sizing |
32| **Responsive** | 1 col mobile → 2–4 cols desktop |
33
34## Implementation
35
36- **CSS Grid**: `repeat(auto-fill, minmax(min, 1fr))` or `repeat(auto-fit, minmax())` for fluid columns
37- **Breakpoints**: e.g., 1 col <768px; 2 cols 768–1024px; 3–4 cols >1024px
38- **Consistency**: Same padding, aspect ratios across items; see **card** for card structure
39
40## Best Practices
41
42| Principle | Practice |
43|-----------|----------|
44| **Equal hierarchy** | Items compete equally; no single dominant item |
45| **Consistent sizing** | Same card/item dimensions in grid |
46| **Gap consistency** | Uniform gap (e.g., 16px, 24px) |
47| **No layout shift** | Reserve space for images; avoid CLS |
48
49## Responsive
50
51- **Mobile**: Single column; full-width items
52- **Tablet**: 2 columns; touch targets ≥44×44px
53- **Desktop**: 3–4 columns; hover states OK
54
55## Infinite Scroll
56
57If 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.
58
59## Related Skills
60
61- **site-crawlability**: Infinite scroll SEO; paginated component pages
62- **card**: Card structure within grid; product, template, tool cards
63- **list**: List layout vs grid; when to use each
64- **masonry**: Masonry for varying heights (Pinterest-style)
65- **carousel**: Carousel for slides/rotation; when grid is too dense
66- **hero-generator**: Hero above; grid below for content sections
67- **products-page-generator**: Product grid
68- **template-page-generator**: Template grid
69- **features-page-generator**: Feature grid
kostja94