n-grid 宫格
配合 n-grid-item 等分排列同类入口或内容。列数、边框、间距、圆角与末行对齐可动态修改；图标、文字、图片和徽标均通过成员的默认插槽组合。
平台兼容性
支持 App、Web、微信小程序。正方形按每个成员实际宽度测量，不以屏幕宽度代替容器宽度。
API
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 每行列数，取正整数，非法值按 1 处理 | Number | 3 |
| border | 显示格子边框 | Boolean | true |
| border-color | 边框颜色，空串取主题边框色 | String | "" |
| square | 内容区域为正方形，关闭后自适应高度 | Boolean | true |
| align | 末行 left / center / right / between 对齐 | String | "left" |
| gutter | 横纵间距 px，边缘留半间距 | Number | 0 |
| background | 格子背景色，空串取主题表面色 | String | "" |
| radius | 圆角 px，-1 跟随令牌；连续边框时为直角 | Number | -1 |
| empty-elements | 末尾占位数，最大 columns - 1；末行项数加占位数不得超过列数 | Number | 0 |
| custom-class | 根节点类，需定义在组件样式表内 | String | "" |
| custom-style | 根节点行内样式 | String | "" |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击成员时触发，与该成员的 click 同参同发；空白区域不触发 | NGridClickDetail： |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 放置 n-grid-item，可用 v-for 循环 |
方法
refresh()：容器在隐藏后显示、祖先宽度异步变化时，通过组件 ref 调用，重新测量各成员。窗口尺寸、columns、gutter、square 和 custom-style 改变会自动重测。
实现说明
| 机制 | 参考做法 | 本库做法与分歧理由 |
|---|---|---|
| 容器与成员 | 等分列容器搭配内容插槽成员 | 保留双组件，provide/inject 下发响应式配置，嵌套宫格取最近的容器 |
| 列数 | col / columns，百分比宽度，自动换行 | 统一 columns，百分比列宽，不做减 1px 的舍入补偿 |
| 方形与高度 | 测容器宽后下发格子高度，可关闭方形 | 每个成员测内容节点实际宽度后设同值高度，支持窄容器、单项自定义宽度与根内边距覆盖，不依赖屏宽或预估内边距 |
| 末行排布 | align 或 between，部分平台补空格 | align 统一四种对齐，empty-elements 全端补透明占位，保持列位 |
| 边框 | 容器上/左线，成员下/右线，伪元素或原生边框 | 无间距时每格四边常驻细线以边界为中心，相邻格子共用同一位置的线，空白处不画线，末行任意对齐均闭合；有间距时各成员使用带圆角的独立原生边框 |
| 背景与圆角 | 容器可配置背景/圆角，成员可覆盖背景 | 容器下发格子背景/圆角，单项背景优先；连续边框保持直角避免交点缺口 |
| 间距 | gutter 或格子内边距 | 成员根节点四边半间距，横纵同值，不依赖 CSS gap |
| 点击 | 父子点击通知，回传 name 或 index | 统一 { index, name }，name 未设置时用 index；成员阻断原生冒泡并调用父通道，避免重复派发 |
| 按压 | 成员 highlight 或默认按压态 | 保留 highlight，用原生 hover-class 透明度反馈，不拦截插槽内输入控件的触摸 |
| 内容扩展 | 插槽组合图标、文字、徽标，与 swiper 配合 | 保留自由内容与原生 swiper 组合，不在宫格内增加图标或分页引擎 |
| 动态结构 | 子项更新与末尾占位更新 | 容器、成员与内容宿主保持稳定，占位格和边线常驻并用 v-show 控制；切换布局配置保留插槽状态，业务成员增删按调用方的稳定 key 更新 |
定制优先使用 --n-grid-radius、--n-grid-border-width、--n-grid-min-height、--n-grid-pressed-opacity；颜色跟随 --n-bg-1、--n-border。局部内容用成员 content-style。连续边框只描绘实际成员，占位及末行空白不画线；边线向格子边界两侧各伸出半个线宽，宿主需要显式允许 overflow。
正方形会固定内容高度，较长内容应关闭 square。初次挂载或隐藏状态测得宽度为 0 时保留自然高度，显示后调用 refresh()；没有定时轮询。单项脱离 n-grid 使用会显式报错。
开发验证
在组件库目录运行 node scripts/test-grid.cjs <HBuilderX plugins 目录>，使用 HBuilderX 自带的 Vue 编译器与运行时执行实际组件，验证点击、插槽状态保留、成员增删与异步测量。该脚本不替代原生设备上的绘制及输入焦点验收。