grid

Name: grid
Author: kostja94

753stars109forks

How to install grid?

kostja94/marketing-skills/grid

$npx -y skills add kostja94/marketing-skills --skill grid

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type

grid

753stars109forks

View on GitHub

How to install grid?

kostja94/marketing-skills/grid

$npx -y skills add kostja94/marketing-skills --skill grid

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type