这是一款按半小时刻度排布的横向日程表，完全由 CSS Grid 实现，零 JavaScript。表头是从 07:30 到 17:00 的 20 个时间格，下方每一行代表一个人或一项资源，彩色块标出任务的起止与时长。色块半透明填充、实色描边，容器可横向滚动，列宽再挤也不会把时间文字压折行。样式用 @layer 分层组织、配色用 OKLCH 定义，是一份结构相当规范、可以直接接进项目的布局范本。

这款 CSS Grid 排期表的四个亮点

加任务只写两个数字：起始列与结束列，位置和宽度自动算好。
表头与内容永远对齐：靠 subgrid 继承父级列轨道，缩放时不会错位。
配色只需一个属性：色块的填充、边框、文字色由一个 data 属性统一决定。
无脚本、无依赖，接入任何框架都不冲突，也方便由后端直接渲染。

subgrid 是怎么让甘特图列宽永不错位的

其一，对齐交给 subgrid 而不是靠算。表头、背景网格线、任务块本是三个独立图层，各自定义列宽必然在缩放时错位。源码让子层直接继承父级的列轨道，一处定义、处处对齐：

grid-template-columns: subgrid;

任务块本身只对外暴露"起止列"两个变量，所以新增一条任务就是加一个 div、写两个数字，完全不用计算 left 和 width。

其二，色块用 color-mix 调透明度而非直接给 rgba。填充色由主色与透明按比例混合得到，边框和文字仍保持实色——底下的网格线能透出来，文字对比度却不受影响。整套色板在 :root 里以 token 形式集中管理，新增一种颜色只要加一个变量和一条选择器。作者还专门为浅色的黄色块换了深色文字，这类细节很见功底。

其三，长标签不会撑破列宽。色块显式声明了最小尺寸约束并做了溢出省略，文字再长也只会截断，不会把整列顶宽——这是很多手写甘特图最容易翻车的地方。

怎么改成自己的排班表或课程表

只有 HTML 与 CSS 两个文件。新增任务是复制一个色块元素、改颜色标记与起止列号；新增一行是整段复制一个行容器，结构非常直白，源码中的注释也说明了每部分的职责。

时间范围要调整时，改表头文字并同步样式里的总列数变量即可。:root 中集中了配色、间距、圆角、行高、色块透明度等全部变量，把页面底色与卡片底色换成深色，就能直接得到一套暗色版本。

兼容提示：subgrid 与 color-mix 需要较新的浏览器，Chrome / Edge 117+、Safari 16.4+、Firefox 71+ 可正常显示。如需兼容更老的环境，可将 subgrid 换成与父级一致的固定列定义、color-mix 换成对应的 rgba 值。运行方法参见压缩包内的帮助文档。

关于这款时间轴排期表的常见问题

时间范围能改成全天或跨天吗？

能。表头文字直接改，同时把样式里的总列数变量同步成对应的格数即可，两处数量保持一致就不会错位。刻度也不限于半小时，改成一小时或十五分钟都可以。

能加更多行、更多任务吗？

没有数量限制。新增一行是整段复制一个行容器，新增任务是加一个色块元素、写上起止列号，两者都不需要改任何计算逻辑。

数据能由后端动态渲染吗？

非常适合。任务块的位置只依赖两个内联变量，后端模板或前端框架循环输出时把起止列号算好填进去即可，不涉及任何脚本运算。

手机上怎么显示？

外层容器可横向滚动，并设了最小宽度，因此窄屏下是左右滑动查看，时间文字不会被挤到折行或重叠，这比强行压缩列宽的做法可读性更好。

适用场景

适合排班表、项目甘特图、会议室与设备预订、课程表、直播排期等后台管理场景，也可作为学习 CSS Grid 进阶用法（subgrid、@layer、color-mix、OKLCH）的完整参考。下载源码即可查看全部实现细节。