完善页面细节4

pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md

@@ -23,7 +23,18 @@
      - `768px - 1199px`: 固定 2 列 (`grid-template-columns: repeat(2, minmax(0, 1fr))`)。
      - `< 768px`: 固定 1 列 (`grid-template-columns: repeat(1, minmax(0, 1fr))`)。
   4. 使用 `minmax(0, 1fr)` 配分子项 `min-width: 0` 确保在任何容器宽度下网格不被撑爆。
-- **强制规则**: 任何页面都不允许出现一行 3 个卡片的情况。
+- **强制规则**: 任何页面都不允许出现一行 3 个卡片的情况。(注：除非是类似“商品分类”样式的预览展示，需遵循下文响应式规则)
+
+#### **原因二十七：响应式预览网格布局 (装饰/设计模块规范)**
+
+- **现象**: 在小屏下预览手机模型重叠或在大屏下留白过多。
+- **解决方案**:
+  1. 使用 `display: grid` 代替 `flex-wrap`。
+  2. **三段式响应式**:
+     - `> 1250px`: `grid-template-columns: repeat(3, 1fr);` (一行 3 个)
+     - `700px ~ 1250px`: `grid-template-columns: repeat(2, 1fr);` (一行 2 个)
+     - `< 700px`: `grid-template-columns: 1fr;` (一行 1 个)
+  3. **Case Study**: `pages/mall/admin/decoration/category.uvue` (商品分类) 采用了此标准实现 1:1 视觉复刻。
 
 #### **原因十三：侧边栏响应式断点与 Overlay 冲突 (严重体验红线)**