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)