grid
/install 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))orrepeat(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
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install grid - 安装完成后，直接呼叫该 Skill 的名称或使用
/grid触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
grid 是什么？
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-colu... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 202 次。
如何安装 grid？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install grid」即可一键安装，无需额外配置。
grid 是免费的吗？
是的，grid 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。
grid 支持哪些平台？
grid 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 grid？
由 Kostja Zhang（@kostja94）开发并维护，当前版本 v1.0.1。