grid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: Grid Layout

组件：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.

用于指导平等层级多列内容展示的网格布局设计。网格可展示多个同等权重的内容项，空间利用率高且易于浏览，适用于产品、模板、工具、功能、博客索引和画廊等场景。

调用规则：首次使用时如果有帮助，可以先用1-2句话介绍本技能的覆盖范围和价值，再提供核心输出。后续使用或用户要求跳过介绍时，直接输出核心内容即可。

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.

适用网格布局的场景	适用列表布局的场景
视觉内容（图片、缩略图）	文本为主、需通过标题快速扫描的内容
所有内容项权重平等	内容紧凑、项数多、信息密度高的场景
产品、模板、画廊、功能展示	博客索引、文档、搜索结果
浏览、发现内容的场景	阅读、快速扫读的场景

列表布局可参考 list 技能；网格内的卡片结构可参考 card 技能。

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

元素	作用
Columns（列）	1~4+列，自适应视口尺寸
Gap（间距）	内容项之间的统一间距
Items（内容项）	尺寸相等或按比例分配
Responsive（响应式）	移动端1列 → 桌面端2~4列

Implementation

实现方案

CSS Grid:

repeat(auto-fill, minmax(min, 1fr))

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

CSS Grid：使用

repeat(auto-fill, minmax(min, 1fr))

或

repeat(auto-fit, minmax())

实现流式列布局

Breakpoints（断点）：例如：<768px时1列；768~~1024px时2列；>1024px时3~~4列
一致性要求：所有内容项的内边距、宽高比保持一致；网格内卡片结构参考 card 技能

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

原则	实践方案
层级平等	所有内容项权重对等，无单一主导项
尺寸一致	网格内的卡片/内容项尺寸相同
间距统一	间距保持一致（例如16px、24px）
无布局偏移	为图片预留占位空间，避免CLS

Responsive

响应式适配

Mobile: Single column; full-width items
Tablet: 2 columns; touch targets ≥44×44px
Desktop: 3–4 columns; hover states OK

移动端：单列布局，内容项占满宽度
平板端：2列布局，可点击区域尺寸≥44×44px
桌面端：3~4列布局，可添加hover交互状态 |

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.

如果网格搭配无限滚动使用：爬虫无法访问滚动加载的内容。对于SEO重要的内容，请提供分页组件页面。搜索友好的实现方案参考 site-crawlability 技能。