时间轴布局取决于主维度：纵向时间线用grid-template-rows定义刻度，横向日期轴用grid-template-columns定义列；二者正交组合实现交叉排版，避免单向硬套导致跨时段事件错位或z-index失效。
时间轴用 grid-template-rows 还是 grid-template-columns？
取决于数据主维度。时间轴本质是「时间线 + 事件点」，若事件按天/小时纵向排列（如日程表从早到晚一列到底），用 grid-template-rows 更自然；若需横向滚动展示多日（如周视图），则优先用 grid-template-columns 定义日期列，再用 grid-row 控制事件跨行高度。
常见错误是强行把日程表塞进单方向 Grid：比如用 grid-template-columns: repeat(7, 1fr) 做周视图，却用 grid-column 拖拽事件——结果事件无法跨天，或重叠时 z-index 失效。真正交叉排版的关键，是让时间轴（纵轴）和日期轴（横轴）各自成为 Grid 的一个维度。
- 日程表主结构建议：
display: grid+grid-template-rows定义时间刻度（如每30分钟一行），grid-template-columns定义日期列（如repeat(7, minmax(200px, 1fr))） - 时间轴事件用
grid-column和grid-row双向定位，例如某会议从周二 10:00 到 11:30，在 30 分钟粒度下占第 20–23 行，列位置为第 3 列（周二） - 避免用
grid-area写死名称——动态日程无法预设命名，直接算grid-row: 20 / 24更可控
如何让跨时段事件自动撑开行高而不破坏网格对齐？
Grid 本身不“感知”内容高度，grid-row 只指定起止行线，行高由 grid-auto-rows 或显式 grid-template-rows 控制。若事件跨度大但行高固定，内容会溢出或被裁剪。
解决方法不是调 min-height，而是用 grid-auto-rows: minmax(30px, auto) —— 这样既保证最小刻度（如30分钟），又允许某一行因长事件内容自动增高，且不影响其他行的基准对齐。
- 慎用
grid-template-rows: repeat(48, 30px)（一天48个30分钟块）：一旦某事件带描述文本变高，会撑破格子，导致下方所有事件错位 - 更稳的组合：
grid-template-rows: [start] repeat(48, minmax(30px, max-content)) [end]，配合align-content: start防止整体下移 - 如果必须固定行高（如打印场景），改用
overflow: hidden+text-overflow: ellipsis截断内容，而非妥协网格结构
grid-column-start 动态计算日期索引时容易漏掉什么？
把日期转成列号（如周一=1，周日=7）看似简单，但实际常忽略时区、周起始日、节假日跳过这三点。JavaScript 生成列位置时，date.getDay() 返回 0（周日）到 6（周六），而 CSS 列索引从 1 开始，直接 +1 会把周日变成第1列——若设计上要求周一为第一列，就得先 getDay() || 7 再减1。
- 跨月日程：某事件在 3 月 31 日，但网格只渲染 4 月 1–7 日，列索引应为
0或auto，而非硬算成第 31 列导致偏移 - 节假日隐藏列：若 4 月 5 日放假不渲染该列，后续日期列索引要整体左移，不能只靠日期数字映射
- 响应式断点：小屏下可能合并多日为一列（如“本周”），此时
grid-column应设为1 / -1而非具体数值，否则媒体查询切换后失效
为什么 z-index 在 Grid 里有时不生效？
Grid 容器默认是 stacking context 创建者，但仅当它有 transform、opacity 、<code>filter 等属性时才触发。多数时间轴容器没这些，所以子元素的 z-index 直接相对于文档流层叠——导致后渲染的事件总盖住前面的，无论 z-index 值大小。
真正可控的方式是用 grid-row 和 grid-column 的声明顺序：CSS Grid 中，后声明的网格项默认层叠在前声明的上面。所以渲染时按时间先后排序（早的事件先写入 DOM），就能自然实现“早的在下、晚的在上”的视觉逻辑。
- 不要给每个事件加
z-index: 100、z-index: 101——既难维护，又在无 stacking context 时完全无效 - 若必须强制层级（如高亮当前选中事件），对容器加
position: relative或transform: translateZ(0)创建 stacking context，再用z-index - 注意：Firefox 对 Grid 中
z-index的处理比 Chrome 更严格，测试时务必双端验证
交叉排版最易被忽略的，是把时间精度（如分钟）、显示粒度（如30分钟一行）、DOM 渲染顺序三者混为一谈。它们分别影响计算、布局、层叠，改其中一个不联动另两个，视觉就会错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
