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** 定宽：标题栏于是只占 `<h2>` 的宽度，`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;
 }