01 功能说明
一份简明的参考资料，涵盖网格构成、网格类型、响应式行为和常见页面布局模式。
Layout Grid 侧重于页面骨架：列、列间距、外侧边距，以及它们如何随视口尺寸变化。它区分流式列、具有固定最大宽度的容器和自适应布局，因此网格规范既可以描述布局行为，也可以描述桌面端截图。
该来源是一份精简指南，而不是实现库。其中常见的列数和断点示例仅作为起点。有用的产出应当是根据内容选定的网格，并清楚说明全出血区域、受限宽度的阅读区域、侧边栏和重复卡片的处理方式。
预期交付物
根据内容选择分栏网格、模块化网格、基线网格或复合结构，而不是假定每个页面都需要相同的网格。
定义列在何处拉伸、容器在何处停止增宽，以及列或侧边栏何时收起。
检查断点附近的过渡，而不只是最小和最大的参考屏幕。
02 适用场景
没有指定的运行时依赖；需要真实的内容约束才能选择有用的网格值。
03 关键决策
只描述桌面端列的规范，会让最困难的响应式决策仍悬而未决。
打破网格可以突出内容，但应当是有意为之，而不是意外造成的错位。
04 示例任务
以下示例简述尚未经过测试。使用前请检查该技能的设置。
使用仓库中记录的安装方式，并保留其中引用的所有配套文件。此条目描述的是一种聚焦的设计方法，而非可执行应用程序。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/layout-grid/SKILL.md没有指定的运行时依赖；需要真实的内容约束才能选择有用的网格值。
运行该技能之前，请调整此简述中的范围、来源材料和约束。
使用 layout-grid 为一个包含章节侧边栏、文章正文和可选目录的文档页面编写规范。定义列数、列间距、外边距、最大宽度和收起行为。说明从桌面端到移动端之间会发生什么变化，并将阅读宽度与页面外层网格分开处理。根据以下可观察的标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
9a6930cf84a8一份简明的参考资料，涵盖网格构成、网格类型、响应式行为和常见页面布局模式。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数是带日期的受欢迎程度信号，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/layout-grid/SKILL.md