该技能聚焦设计导向的网格系统，核心是用相对单位和 clamp() 构建流式、分辨率无关的网格，单一网格系统适配所有视口，而非针对不同断点维护多套网格。
主要能力：通过 CSS 自定义属性定义网格令牌，如 --grid-gutter 用 clamp() 在 1rem 至 2rem 间缩放、--grid-margin 在 1rem 至 4rem 间缩放，并基于 12 列计算列宽；支持 auto-fit 与 auto-fill 的响应式卡片网格，用 repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) 防止窄屏溢出；提供 12 列显式网格与 data-span 跨度工具；支持命名网格区域做页面级布局（content、wide、full）；可用 subgrid 让嵌套卡片、表单与父网格轨道对齐；提供内容+侧栏、黄金比例、feature+gallery 等非对称布局；用容器查询实现组件级响应；附调试网格覆盖层。
用法：以 @layer 组织 tokens、layout、components，在 :root 定义令牌，body 使用命名网格列，卡片网格使用 auto-fit 模式，组件级响应使用 @container，嵌套对齐使用 grid-template-rows: subgrid。布局尺寸避免固定像素，边框、阴影等细节可用像素；调试时通过 document.documentElement.style.setProperty('--debug-grid', '1') 切换覆盖层。
限制：真正的瀑布流仍需 JavaScript 计算 --rows 或等待 CSS masonry 支持；该资料未提供安装命令、平台要求、收费方式与效果保证等信息。