用 css grid 实现课程表更灵活：用 grid-template-areas 定义可读布局，grid-auto-flow: dense 回填空位，minmax() + repeat() 控制列宽自适应，跨行必须用 grid-row 显式指定线号。
课程表这种行列交叉、单元格跨多行/列、固定表头+动态内容的结构，用 grid 实现比用 table 更灵活、语义更清晰，且天然支持响应式重排和视觉错位（比如某节课占两节时间）。
grid-template-areas 配合命名区域定义视觉结构
课程表本质是“时间 × 周几”的二维映射，grid-template-areas 能把布局意图直接写成可读字符串，避免手动算线号。
- 第一行放星期标题，用
"mon tue wed thu fri"； - 每节课按起始节次和持续节数生成对应区域名，如
"cs101 cs101 cs101 - -"（表示周一第1–3节）； - 左上角空单元格（时间/星期交汇处）设为
"time time time time time"或留空； - 注意：所有行的区域名数量必须一致，不足补
"."，否则声明无效。
grid-auto-flow: dense 保证自动填充不漏空位
当课程跨度不一（比如有的课1节、有的2节），默认 grid-auto-flow: row 会严格按顺序填，导致中间出现空白。启用 dense 后，Grid 引擎会回填之前跳过的空位。
- 加
grid-auto-flow: dense到容器上； - 但要注意：它可能打乱 DOM 顺序渲染（视觉顺序 ≠ HTML 顺序），若需屏幕阅读器友好，应配合
order显式控制； - 不建议和
grid-template-areas混用——二者逻辑冲突，dense只对未显式定位的项生效。
用 minmax() + repeat() 实现自适应课时列宽
课程表的“节次”列（如 8:00–8:45）宽度需固定，而“星期”列要随屏幕缩放等比拉伸，minmax() 是关键。
- 写法示例：
grid-template-columns: 80px repeat(5, minmax(120px, 1fr))； - 首列为固定课时标签宽度（80px），后5列是周一到周五，最小120px、最大占剩余空间均分；
- 避免用
fr单独定义所有列——那样课时列也会弹性缩放，破坏时间轴比例； - 若需支持小屏，可在媒体查询中改用
grid-template-columns: 60px 1fr+grid-auto-flow: column，让星期纵向堆叠。
跨行定位必须用 grid-row 而非 grid-area
课程跨越多节（如实验课占第3–4节），不能只靠 grid-area 字符串——它只定义区域名，不控制起止线。真正跨行得靠线号或 span。
- 正确做法：
grid-row: 3 / span 2表示从第3行线开始，跨2行轨道； - 错误写法：
grid-area: "lab"却没在grid-template-areas里定义该区域，或定义了但没覆盖足够行数； - 调试技巧：浏览器开发者工具里勾选“Show line numbers”，一眼看出哪条线没对齐；
- 注意：行号从1开始计，
grid-row: 1 / 3占第1–2行（即跨2行），不是3行。
最易被忽略的是网格线编号与内容实际占用轨道数的关系——比如设置了 grid-template-rows: 40px 60px 60px，那么第3节课若从第2行线开始、跨2行，实际占的是第2和第3轨道（即60px+60px），而非第2和第4行线之间。算错线号，跨行就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
