aionclaw卡片列表可通过动态注入css实现响应式列数调整：使用auto-fit与minmax(320px,1fr)确保小屏单列、大屏自动增列，避免溢出或留白；支持devtools临时生效及启动参数持久化。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
让AionClaw中自定义卡片列表（如技能市场、数字专家、自动化任务面板）在不同屏幕宽度下自动调整列数，避免小屏溢出或大屏留白，需绕过客户端默认布局限制，直接修改其内嵌Web视图的CSS样式规则。
定位并注入自定义CSS
打开AionClaw客户端 → 点击右上角「设置」齿轮图标 → 在弹出菜单中选择「开发者模式」→ 勾选「启用Web调试面板」→ 重启客户端。
重启后，任意进入含卡片列表的页面（例如「技能市场」），按 Cmd+Option+I（Mac）或 Ctrl+Shift+I（Windows）唤出DevTools → 切换到「Elements」标签页 → 展开左侧DOM树，找到包裹卡片的容器元素，通常类名含 card-grid、grid-layout 或 skill-list。
确认该容器已应用 display: grid，且无 grid-template-columns 内联样式覆盖 —— 若存在内联样式，需优先在后续CSS中用 !important 覆盖。
写入响应式Grid列规则
回到DevTools → 切换至「Console」标签页 → 粘贴并执行以下JS代码：
const style = document.createElement('style'); style.textContent = `.card-grid, .grid-layout, .skill-list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))); gap: 16px; }`; document.head.appendChild(style);
这行代码动态插入一条全局CSS规则，强制所有匹配类名的网格容器采用自动列数逻辑。其中 auto-fit 是关键，它会合并未填充的轨道，而 auto-fill 会导致右侧大片空白，务必不要写错。
执行后立即生效：拖动窗口缩放，观察卡片是否在 ≥320px 宽度时新增一列，窄于320px时自动堆叠为单列。
持久化保存配置（可选）
方法一：修改客户端资源文件（需每次更新后重做）
前往安装目录，定位到 Resources/app.asar.unpacked/renderer/css/（Mac）或 resources/app.asar.unpacked/renderer/css/（Windows）→ 找到主样式文件（如 main.css 或 layout.css）→ 在末尾添加：.card-grid, .grid-layout, .skill-list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))); gap: 16px; }
方法二：使用启动参数注入（推荐，升级不丢失）
关闭AionClaw → 右键桌面快捷方式 → 属性 → 在「目标」栏末尾追加：
--custom-css="data:text/css,.card-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr)));gap:16px;}"
注意引号与等号间不能有空格，且 Windows 路径含空格时需整体用英文双引号包裹整个目标路径。
重新启动客户端，规则即永久生效。若某次升级后失效，只需重新执行控制台注入代码，再决定是否补做持久化步骤。
