npx skills add https://github.com/kostja94/marketing-skills --skill grid指导网格布局设计，用于等层级、多列内容展示。网格以同等强调程度展示多个项目；空间高效且易于浏览。适用于产品、模板、工具、功能、博客索引和画廊。
调用时机：在首次使用时，如果适用，以1-2句话说明此技能涵盖的内容及其重要性，然后提供主要输出。在后续使用或用户要求跳过时，直接提供主要输出。
| 使用网格当 | 使用列表当 |
|---|---|
| 视觉内容（图像、缩略图） | 文本密集；通过标题浏览 |
| 项目间强调程度相等 | 紧凑；项目众多；信息密集 |
| 产品、模板、画廊、功能 | 博客索引、文档、搜索结果 |
| 浏览、发现 | 阅读、扫描 |
查看 list 了解列表布局；查看 card 了解网格内的卡片结构。
| 元素 | 用途 |
|---|---|
| 列 | 1–4+ 列；适应视口 |
| 间距 | 项目间一致的间隔 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| 项目 | 等尺寸或按比例调整尺寸 |
| 响应式 | 移动端 1 列 → 桌面端 2–4 列 |
repeat(auto-fill, minmax(min, 1fr)) 或 repeat(auto-fit, minmax()) 实现流动列| 原则 | 实践 |
|---|---|
| 层级相等 | 项目竞争平等；没有单一主导项目 |
| 尺寸一致 | 网格中卡片/项目尺寸相同 |
| 间距一致 | 统一的间距（例如，16px, 24px） |
| 无布局偏移 | 为图像预留空间；避免 CLS |
如果在网格中使用无限滚动：爬虫无法访问滚动加载的内容。对于SEO关键内容，请提供分页的组件页面。查看 site-crawlability 了解对搜索引擎友好的实现方式。
每周安装量
169
代码仓库
GitHub 星标数
239
首次出现
2026年3月6日
安全审计
安装于
cursor152
gemini-cli151
codex151
kimi-cli151
opencode151
github-copilot151
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.
| 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.
| 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 |
repeat(auto-fill, minmax(min, 1fr)) or repeat(auto-fit, minmax()) for fluid columns| 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 |
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.
Weekly Installs
169
Repository
GitHub Stars
239
First Seen
Mar 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor152
gemini-cli151
codex151
kimi-cli151
opencode151
github-copilot151
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
116,600 周安装
mf-integrate：为现有项目快速添加模块联邦（Module Federation）配置
100 周安装
AI驱动代码审查专家 | 自动化性能测试与安全漏洞分析工具指南
100 周安装
豆包Seedream图像生成技能：文生图、图生图、组图生成API使用指南
100 周安装
drawio-architecture 架构图绘制技能 | 全栈开发必备的AI辅助设计工具
100 周安装
全平台广告审计工具 - 自动化分析Google、Meta、LinkedIn、TikTok广告账户健康度与优化
100 周安装
Apache Airflow DAG 模式指南：生产就绪的数据管道设计与部署策略
100 周安装