repeat()不支持混用px和fr，会报错并退回到默认布局；正确写法是将不同单位轨道并列于repeat()外部，或用minmax()、calc()等方案实现混合尺寸效果。
repeat()里混用px和fr会直接报错
CSS的repeat()函数本身不接受混合单位的单个参数，比如repeat(3, 100px 1fr)这种写法在规范里是非法的——浏览器会忽略整条grid-template-columns或grid-template-rows声明，退回到默认布局。
真正能生效的，是把不同单位的轨道“并列写在repeat()外部”，让repeat()只负责重复某一种模式。
-
repeat(2, 100px) 1fr→ 先重复两个100px列，再加一个1fr列 -
1fr repeat(3, 200px) 1fr→ 左右各一个弹性列，中间三个固定宽列 - 不能写成
repeat(2, 100px 1fr)，这会被当作语法错误
用repeat(auto-fit)搭配minmax()实现响应式混合尺寸
想让容器自动填满、同时保证最小宽度又允许伸缩？靠repeat(auto-fit, minmax(200px, 1fr))。它不是“混合单位”，而是用minmax()定义单个轨道的弹性区间：下限是200px（具体尺寸），上限是1fr（剩余空间均分）。
- 容器变窄时，列数自动减少，但每列不会小于
200px - 容器足够宽时，每列尽可能均分剩余空间，而非死守
200px - 注意：
auto-fit会合并空轨道，auto-fill则保留空位，视觉效果差别明显
repeat()和calc()配合绕过单位限制
如果真需要“每个重复单元里既有像素又有弹性”，得把计算逻辑提前——用calc()算出等效值，再喂给repeat()。例如：想要“每组包含一个80px图标列 + 一个占剩余空间1/3的文本列”，可以这样写：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(3, 80px calc((100% - 240px) / 3));
这里240px是3组×80px图标的总宽，calc()动态算出每组文本列该占多少。虽然不够直观，但它是目前最稳妥的绕过方案。
- 必须手动算清总固定宽，否则
calc()结果可能为负或溢出 - 百分比基于网格容器宽度，不是父元素，别和
width混淆 - IE不支持
calc()在grid-template-columns里使用，如需兼容得降级
别忽略gap对实际可用尺寸的影响
很多人写了repeat(4, 1fr)，又加了gap: 20px，却没意识到：4列之间的3个间隙共占60px，这60px是从容器总宽里硬扣的，不是从某列里减的。结果就是每列实际宽度 = (容器宽 - 60px) / 4，而不是直觉上的容器宽 / 4。
-
gap不影响repeat()的计数，但影响每列可分配空间 - 用
minmax()+gap时，minmax()的下限是“内容区最小宽”，不含gap - 调试时打开浏览器开发者工具的网格叠加层，一眼就能看出
gap是否吃掉了预期空间
事情说清了就结束
