Layout Grid

---
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)