Grid 布局

课程总览里，课程、时长、进度和待复习属于同一个信息区域。Grid 先建立列和行，再让每张卡片占据清晰的网格位置。

• 开始时：四张卡片沿一列堆叠，信息区域没有形成可扫读的行列关系。
• 完成后：卡片进入两列网格，行、列和间距把不同信息对齐起来。

当问题是同一信息区域要同时表达行和列，先看 Grid；Flex 布局 解决同级内容沿一个方向的排列，样式 CSS 负责表达这些规则。Grid ≠ Flex，也不是 CSS 的另一个名字。

• 想让课程、时长、进度和待复习形成二维对齐关系，调整 Grid 容器的列、行和 gap。
• 想让导航按钮沿一条方向排列，处理的是 Flex；想写出行列轨道和间距声明，使用 CSS。

看课程总览的真实界面：标注会落在 Grid 容器、列轨道、行轨道、gap 和网格项目上。

• 点击编号或说明行可以固定当前部件，悬停离开后恢复已固定的部件。
• 轨道和项目来自真实 DOM 的测量，不用图片坐标猜网格位置。

课程总览选择两列或单列后，四张卡片直接展示对应的网格关系；选择本身就是预览结果，不需要额外提交按钮。

Grid 布局什么时候用、什么时候不用？先看任务边界，再看组件外观。

• 什么时候用：课程、时长和进度需要在固定行列中对齐，Grid 能直接表达二维关系。
• 什么时候不用：导航按钮只沿一个方向排列时，使用 Flex 更容易保持弹性间距。

怎么判断：先看同级内容是否同时需要行与列，再选择职责准确的布局规则。

请使用 Grid 实现课程总览：让课程、时长、进度和待复习四张同级卡片进入两列网格，设置 12px 的行列间距并让卡片内容从顶部对齐；当可用宽度不足时降为单列，不要把文字缩成不可读的小字；使用真实 DOM 和项目间距变量，在 390px 与 320px 宽度下不出现页面横向滚动。