用途：该技能为构建响应式布局系统提供指导，结合现代 CSS 技术搭建可跨设备自适应的界面。适用场景包括：带侧边栏与页头的响应式管理后台、卡片或图库类网格布局、瀑布流（Pinterest 风格）布局、可调整大小的分屏面板、响应式断点体系、带导航与内容区的应用外壳，以及移动优先设计。
主要能力： 一、Grid 系统，用 CSS Grid 做二维结构化布局，支持 12 列网格（repeat(12, 1fr) 配合 gap、max-width、auto 外边距）与 auto-fit 自适应网格（repeat(auto-fit, minmax(min(280px,100%), 1fr))）。 二、Flexbox 模式，用于一维布局与对齐，如 Holy Grail 布局（列方向 flex、min-height:100vh，主体 flex:1，侧栏固定宽度 flex-shrink:0，主区 min-width:0 防溢出）。 三、容器查询，按容器而非视口自适应组件，使用 container-type: inline-size 与 container-name，配合 @container 条件。 四、响应式断点，移动优先，语义断点为 sm 640、md 768、lg 1024、xl 1280、2xl 1536（单位 px）。 五、间距系统，以 4 或 8 为基础单位的设计令牌，如 --spacing-xs 至 --spacing-3xl，配合 .stack > * + * 等系统化应用。 六、框架集成，给出 Tailwind 配置示例，将 spacing 与 screens 映射到设计令牌。
使用方式：先明确布局类型与响应式行为；再选择 CSS Grid、Flexbox 或容器查询；实现时使用 design-tokens 提供的令牌；可用脚本生成配置与校验，如 node scripts/generate_breakpoints.js --approach mobile-first、node scripts/calculate_fluid_typography.js --min-vw 320 --max-vw 1920、node scripts/validate_layout_accessibility.js path/to/component.tsx；最后跨设备尺寸测试响应性。
附带资料：脚本包括 generate_breakpoints.js、calculate_fluid_typography.js、validate_layout_accessibility.js；参考文档涵盖布局模式、响应式策略、CSS 技术、无障碍布局、库指南与性能优化；示例含 admin-layout.tsx、responsive-grid.tsx、masonry-layout.tsx、split-pane.tsx；资源含 breakpoint-config.json、layout-templates.json、spacing-scale.json。
限制：资料显示容器查询在所有现代浏览器（2025）已可用于生产；其余关于浏览器兼容细节、收费与价格等信息暂未提供。