布局与栅格系统

要解决的问题

栅格布局常被写成一长串媒体查询：mobile 一列、tablet 两列、desktop 四列。页面小改版时，断点和内容结构互相拉扯；同一张仪表板在不同容器里又被拆成完全不同的 HTML。这个技能面向的是 UI 布局与栅格决策：怎样先定义内容结构，再选择 12 栏、CSS Grid named lines 或 Flexbox，并把响应式行为写成可复用规则。

核心能力与工作流

它接收与布局、栅格相关的具体需求、问题描述和约束条件，按 references/template.md 输出结构化分析、方案或模板。工作流是：

• 明确内容结构：先判断页面是卡片、列表还是仪表板，列出主要容器和优先级。
• 选择栅格方案：在 12 栏、CSS Grid named lines、Flexbox 之间做取舍，而不是先抄现成断点。
• 设定断点：参考 mobile 320-768、tablet 768-1024、desktop 1024+，但具体值仍由内容决定。
• 内容优先：先保证关键内容和层级稳定，再谈设备适配；不是简单地把“设备优先”换皮。
• 输出实现说明：给出可直接套用的 CSS Grid 模板，并说明跨断点时的行为变化。

适用边界

适合项目前期的布局规划、栅格方案评审，以及实施时需要一张响应式表格或步骤清单的场景。它不负责替代视觉稿、动效设计或复杂交互状态；如果需求已经超出布局与栅格系统的范围，应拆成更具体的前端问题再处理。断点只是默认参考，最终仍要按真实内容、容器约束和可访问性验证。