---
name: layout-grid
description: 定义响应式布局网格系统，包括列、间距、边距和断点行为。
keywords: [布局网格, layout grid, 响应式布局, grid system, 栅格系统]
tags: [UI设计, 布局]
trigger_phrases:
  - "布局网格"
  - "layout grid"
  - "栅格系统"
  - "响应式布局"
  - "grid system"
---

# Layout Grid

数字产品设计布局网格系统的专家。

## What You Do

定义响应式网格系统，在断点之间创建一致、灵活的页面布局。

## Grid Anatomy

- **Columns（列）**：通常4列（移动端）、8列（平板）、12列（桌面）
- **Gutters（间距）**：列之间的空间（通常16px、24px或32px）
- **Margins（边距）**：外部页面边距（移动端16px，桌面24-48px）
- **Breakpoints（断点）**：布局适应的点（例如375、768、1024、1440px）

## Grid Types

- **Column grid（列网格）**：用于一般布局的等宽列
- **Modular grid（模块网格）**：列+行创建模块
- **Baseline grid（基线网格）**：垂直节奏对齐（4px或8px）
- **Compound grid（复合网格）**：用于复杂布局的重叠网格

## Responsive Behavior

- **Fluid（流体）**：列按比例拉伸
- **Fixed（固定）**：最大宽度容器，内容居中
- **Adaptive（自适应）**：每个断点有不同的布局
- **Column dropping（列降级）**：在较小尺寸下减少列数

## Common Patterns

- **Full-bleed（全宽）**：内容跨越整个视口
- **Contained（容器）**：带边距的最大宽度
- **Asymmetric（不对称）**：侧边栏+主内容
- **Card grids（卡片网格）**：自动填充响应式卡片

## Best Practices

- 使用一致的间距和边距
- 将内容对齐到网格，而不是任意对齐
- 在每个断点测试，不仅仅是极端情况
- 为开发者记录网格规范
- 允许有意打破网格以强调重点

## Psychology Principles Integration

### 菲茨定律应用
- **可点击区域**：确保网格中的交互元素至少44x44px（移动端）
- **边缘放置**：将高频操作置于屏幕边缘或角落，减少移动距离
- **间距控制**：网格间距至少8px，避免误触

### 格式塔原则应用
- **相似性**：使用相同的列宽和间距创建视觉一致性
- **邻近性**：相关内容在网格中相邻放置
- **闭合**：使用网格线暗示内容边界，即使不实际绘制
- **连续性**：引导视线沿网格对齐方向移动

### 认知负荷理论应用
- **网格简化**：限制列数（移动4列、平板8列、桌面12列），降低复杂度
- **渐进式布局**：在小屏幕上简化网格，逐步增加复杂度
- **视觉层次**：通过网格跨度建立清晰的视觉层次

## 中文术语

- 列 (Columns)
- 间距 (Gutters)
- 边距 (Margins)
- 断点 (Breakpoints)
- 流体布局 (Fluid layout)
- 固定布局 (Fixed layout)
- 自适应布局 (Adaptive layout)


---
Source attribution: wanghaisheng
Original project: https://github.com/wanghaisheng/openaiworkhorse-design-team/blob/941a49c93eec04b2f2a6cff5156719d029ac35bb/.claude/skills/designer-role/skills/layout-grid/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 HeisenBerg?

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: wanghaisheng
Original project: https://github.com/wanghaisheng/openaiworkhorse-design-team/blob/941a49c93eec04b2f2a6cff5156719d029ac35bb/.claude/skills/designer-role/skills/layout-grid/SKILL.md
Attribution basis: Source repository record

Fields of work: Design
Roles: Product Designer, UI Designer, UX Designer
Specialties: Cross Platform, Design, Frontend
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: ad0cafed4fda1412b2ad55ed81a34abe4216baf6e1a224e8c8b7df80c4aacec4