less 中 / 被误解析为除法运算符，需用 ~"2/2/3/3" 转义；repeat() 不支持变量，应改用 auto-fit/minmax；ie11 需手动写 -ms-grid 规则并重写布局逻辑。
Less 里写 grid-template-columns: 1fr / 2fr 或 grid-area: 1/1/2/2 会直接报错或编译出错值——这不是你写错了，是 Less 把 / 当成了除法运算符，必须显式转义。
Less 中 / 被误解析为除法运算
Less 默认将 / 视为数学除法，比如 grid-template-columns: 1fr / 2fr 会被当成 “1fr 除以 2fr”，结果编译成 grid-template-columns: 0.5; 这种无效值。同理，grid-area: 2/2/3/3 也会被算成一串数字。
- 错误写法：
grid-area: 2/2/3/3;→ 编译后可能变成grid-area: 0.6666666666666666; - 正确写法：用波浪号加引号包裹，
grid-area: ~"2/2/3/3"; - 所有含
/的 Grid 属性都要转义：grid-column、grid-row、grid-area、grid-template中的轨道定义 - 注意：只转义
/，其他符号（如空格、括号、fr）不用额外处理
repeat() 里的变量无法生效
repeat(@n, 1fr) 在 Less 中永远不工作——不是语法问题，是 CSS 规范不允许运行时计算重复次数，浏览器只认字面量数字或 auto-fit/auto-fill。
- 错误写法：
.grid-cols(@n) { grid-template-columns: repeat(@n, 1fr); }→ 编译失败或生成无效 CSS - 正确路径：改用
repeat(auto-fit, minmax(@min, 1fr))，把控制点从“列数”移到“最小列宽” - 封装 mixin 示例：
.grid-cols(@min: 250px, @gap: 1rem) { grid-template-columns: repeat(auto-fit, minmax(@min, 1fr)); gap: @gap; } - 调用时传宽度，不是列数：
.main-grid { .grid-cols(280px, 1.2rem); }
IE11 兼容需手动降级，不能依赖 Autoprefixer
Autoprefixer v9+ 已完全放弃对 IE Grid 的转换支持，display: grid 在 IE11 里根本不会解析，必须手写 -ms-grid 前缀规则。
-
display: grid→ 必须改成display: -ms-grid; -
grid-template-columns: 1fr 2fr→ 改为-ms-grid-columns: 1fr 2fr;（注意：IE 对fr支持极差，稳妥起见用auto或百分比） -
grid-column: 2 / 4→ 拆成-ms-grid-column: 2; -ms-grid-column-span: 2; - 别指望
@supports (display: grid)能兜住 IE —— 它连@supports块都不识别，降级样式必须写在@supports外层
真正容易被忽略的是：Less 的转义 ~"" 只解决 / 解析问题，但不解决语义合法性；repeat() 的变量限制是浏览器层硬约束，任何预处理器都绕不过去；而 IE 兼容不是加前缀就能完事，是整套布局逻辑要重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
