From a88034dab1be61bd4df10a5026d3effa36edee4c Mon Sep 17 00:00:00 2001 From: Suzumiya Date: Fri, 11 Sep 2026 22:10:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=B5=84=E6=BA=90=E6=80=BB?= =?UTF-8?q?=E8=A7=88=E7=BD=91=E6=A0=BC=E9=80=80=E5=8C=96=E6=88=90=E5=8D=95?= =?UTF-8?q?=E5=88=97=EF=BC=9A=E7=88=B6=E9=93=BE=E5=AE=BD=E5=BA=A6=E4=B8=8D?= =?UTF-8?q?=E5=AE=9A=E8=AE=A9=20auto-fit=20=E5=8F=AA=E8=A7=A3=E6=9E=90=201?= =?UTF-8?q?=20=E4=B8=AA=E8=BD=A8=E9=81=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - styles.css 的 .game-resource-book-main-grid 增加 width: 100%：父级 .game-resource-book-main-world 是列向 flex 容器，交叉轴 auto 外边距（margin: 0 auto）会吃掉自由空间并取消 stretch，使该网格按 fit-content 定宽；fit-content 定宽时网格 inline size 在内在尺寸阶段不定，按 CSS Grid 规范 auto-fit 的重复次数解析为 1，于是 2560x910 窗口下 grid 宽只有 432px、getComputedStyle(grid).gridTemplateColumns 只有 1 个轨道、8 张栏目缩略卡竖向排成一列（top 步距 230） - 同款修 .game-resource-book-main-heading：它在同一个 flex 列里带 margin:auto，同样退化成 fit-content，标题栏只占

宽度且 space-between 无从展开 - 两处都补注释写明「width:100% 是 auto-fit 按 max-width 解析列数的前提」，防止后人当作冗余声明删掉 - 修复后 auto-fit 按 max-width:1120px 解析重复次数：3x280+2x18=876 <= 1120、4x280+3x18=1174 > 1120，即 3 列 - 真机判据：gridTemplateColumns 应给出 3 个非 0 轨道（约 361.33px）、grid 宽 432 -> 1120、8 张缩略卡 top 只有 3 个取值；且必须在总览态核对（栏目态该层带 is-background，opacity 为 0，是背景层） - 未改动任何既有断言；AGC vitest 不加载 styles.css（无 css: true），声明级断言随下一笔提交补进 appSurface 用例 --- apps/ai-game-creator-shell/src/styles.css | 24 +++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index a1d0aecea..245af72b6 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -5879,11 +5879,20 @@ iframe.preview-frame { transform-origin: 0 0; } +/* + * `width: 100%` 与下面的 `.game-resource-book-main-grid` 是同一条约束，别删。 + * + * 这两块都是 `.game-resource-book-main-world`（`display: flex; flex-direction: column`） + * 的子项，而交叉轴上的 auto 外边距（`margin: 0 auto`）会吃掉全部自由空间并取消 `stretch`， + * 使子项退化成 **fit-content** 定宽：标题栏于是只占 `

` 的宽度，`space-between` 无从展开。 + * 显式给 `width: 100%` 让 inline size 确定，再交给 `max-width` 与 auto 外边距居中。 + */ .game-resource-book-main-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; + width: 100%; max-width: 1120px; margin: 0 auto 24px; } @@ -5904,10 +5913,25 @@ iframe.preview-frame { line-height: 1.1; } +/* + * `width: 100%` 不能删——它是「资源总览 8 张栏目缩略卡保持多列」的唯一依据。 + * + * 本网格的父级 `.game-resource-book-main-world` 是列向 flex 容器，而 `margin: 0 auto` 在 + * 交叉轴上会吃掉全部自由空间、取消 `align-self: stretch`，让本元素按 **fit-content** 定宽。 + * fit-content 定宽时，网格的 inline size 在内在尺寸计算阶段是**不定**的，按 CSS Grid 规范 + * 此时 `auto-fit` 的重复次数解析为 **1**，`minmax(min(100%, 280px), 1fr)` 里的 `100%` 也无从 + * 解析 ⇒ 永远只出 1 列，且该列被容器撑成一张缩略卡那么宽（实测 2560×910 窗口：grid 宽 432px、 + * `getComputedStyle(grid).gridTemplateColumns === "432px"`、8 张缩略卡同 left、top 步距 230）。 + * + * `width: 100%` 先把 inline size 定下来（父内容宽 → 被 `max-width` 截到 1120px），`auto-fit` + * 才会按 1120px 解析重复次数：3×280 + 2×18 = 876 ≤ 1120，4×280 + 3×18 = 1174 > 1120 ⇒ 3 列。 + * 删掉它 = 资源总览退回一条纵向长条（单列 × 8 卡 × 212px）。 + */ .game-resource-book-main-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; + width: 100%; max-width: 1120px; margin: 0 auto; }