kf-g-css-flex-grid

用途：在设计、审查或生成 CSS 布局时，规范 display: grid 与 display: flex 的选型与写法，把视觉排布直接映射到代码。主要能力：优先用 grid 处理行列关系明确的区块，如卡片、媒体对象、表单和信息面板；仅对按钮组、标签列、工具栏、导航等单方向排列使用 flex；优先用 grid-template 表达结构，而非把大小定义分散到多处；空白作为布局一部分时使用空网格单元；把布局面名与外观类名分离，用 [grid-area] 承载角色命名，并用 :where([grid-area]) 限定公共规则而非 *。用法要点：先判断元素是否需要作为布局容器，能否用 grid-template 表达视觉结构，以及 flex 是否只需处理一维对齐；选 grid 时先给出 grid-template 结构，选 flex 时说明仅需单方向对齐；涉及断点、容器查询与流体尺寸时，改用 ../kf-g-css-tak-responsive-rules/SKILL.md；gap 与 margin 职责分离时，改用 ../kf-g-css-spacing-gap-margin-rules/SKILL.md。限制：资料未提供安装命令、收费、平台与效果数据；attr() 的类型化语法兼容性尚不统一，若用于基础 CSS，需限定支持浏览器或配合 @supports 渐进增强，并要求 [grid-area] 限定选择器；Safari、Firefox 等广泛兼容项目不应以该公共规则为前提，需保留单独 grid-area 声明作为回退。