「绮课」课表布局的实现：用 Grid 实现首列固定，其余列等宽

需求背景

最近给「绮课」做 UI 重构，最开始渲染一个课表，可以简单用用 grid-cols-7，由于移动端屏幕宽度很窄，第一列不是主要内容，要想办法压缩空间，于是就产生了设置首列宽度的需求，即：

1. 第一列「节次」固定 24 px，剩下的 7 列（周一~周日）平均瓜分剩余宽度；
2. 单元格里的课程名称再长，也不允许把列撑得歪歪扭扭；
3. 纯 CSS 实现，不依赖 JS 计算。

1fr vs minmax(0, 1fr)

核心思路：固定值列先“拿走”它要的宽度，剩下的全部交给 fr 单位。

但直接使用 grid-template-columns: 24px repeat(7, 1fr) 后，在真实数据下渲染时，会导致有内容的列胖成球，没内容的列瘦成针，

原因：Grid 的“隐形”规则：auto 最小值陷阱：1fr 其实是 minmax(auto, 1fr) 的缩写。 auto 在 Grid 里的含义是 min-content：列宽至少要能放下“最长不可分割单词”。

于是像「习近平新时代中国特色社会主义思想概论」这种超长标题直接把列撑爆。

解决办法就是把 1fr 换成 minmax(0, 1fr)，强制最小值为 0。内容再多也不许抢地盘。

示例代码：

css
.timetable {
  display: grid;
  grid-template-columns: 24px repeat(7, minmax(0, 1fr));
  gap: 4px;
}

最终效果：

踩坑小结

兼容性

minmax() 自 2017 年起已被所有现代浏览器支持（Chrome 57+、Firefox 52+、Safari 10.1+）。

（完）