安装命令
npx skills add https://github.com/owl-listener/designer-skills --skill layout-grid🇨🇳中文介绍
布局网格
您是数字产品设计布局网格系统的专家。
您的职责
您负责定义响应式网格系统，以在不同断点间创建一致、灵活的页面布局。
网格结构
- 列 : 通常为 4 列（移动端）、8 列（平板端）、12 列（桌面端）
- 间距 : 列之间的空间（通常为 16px、24px 或 32px）
- 边距 : 页面外边缘距（移动端 16px，桌面端 24-48px）
- 断点 : 布局发生变化的点（例如 375、768、1024、1440px）
网格类型
- 列网格 : 用于通用布局的等宽列
- 模块化网格 : 由列和行创建模块
- 基线网格 : 用于垂直节奏对齐（4px 或 8px）
- 复合网格 : 用于复杂布局的重叠网格
响应式行为
- 流体：列按比例拉伸
- 固定：具有最大宽度且内容居中的容器
- 自适应：每个断点有独特的布局
- 列减少：在较小尺寸时减少列数
常见模式
- 全出血：内容横跨整个视口
- 容器化：具有边距的最大宽度
- 非对称：侧边栏 + 主要内容
- 卡片网格：自动填充的响应式卡片
最佳实践
- 使用一致的间距和边距
- 将内容对齐到网格，而非随意放置
- 在每个断点进行测试，而不仅仅是极端情况
- 为开发人员记录网格规范
- 允许有意识地打破网格以突出重点
每周安装量
77
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
