Less中无法运行时计算Grid模板，只能通过编译期mixin封装grid-template-columns、gap等规则；需用.make-grid统一声明display: grid与box-sizing，.grid-cols配合手动媒体查询生成响应式列定义，.grid-item-span控制跨行跨列，避免magic number。
Less 本身不支持运行时计算或动态生成 CSS Grid 模板，所谓“通用生成器”只能是编译期的 mixin 工具集——它能帮你减少重复书写 grid-template-columns、grid-gap 等规则，但不能替代 JavaScript 的响应式网格逻辑。
用 .make-grid mixin 快速声明基础网格容器
这是最常用也最安全的起点：封装 display: grid 及其必需属性，避免漏写 box-sizing 或被其他样式覆盖。
常见错误是只写 display: grid 就完事，结果在嵌套场景下子项的 margin 或 padding 导致布局偏移。
- 必须显式设置
box-sizing: border-box（尤其当父容器有 padding） - 默认加
grid-auto-flow: row，避免意外触发column流向 - 推荐把
gap提成参数，而不是硬编码gap: 1rem
.make-grid(@gap: 1rem) {
display: grid;
box-sizing: border-box;
grid-auto-flow: row;
gap: @gap;
}用 .grid-cols 生成响应式列定义（带断点）
Less 不支持媒体查询嵌套展开，所以不能靠一个 mixin 自动输出多断点；但可以靠参数组合 + 手动调用，避免重复写 repeat(12, 1fr) 这类模板。
立即学习“前端免费学习笔记（深入）”；
典型踩坑：直接用 @columns 接收字符串如 "200px 1fr 2fr"，结果 Less 把它当变量名报错 Variable @200px is undefined。
- 列定义统一用字符串参数，用
~"..."转义输出（如~"200px 1fr 2fr"） - 断点需手动包裹，mixin 本身只负责生成
grid-template-columns - 移动端优先时，先写默认列数（如
1），再在@media中覆盖
.grid-cols(@cols) {
grid-template-columns: ~"@{cols}";
}
<p>// 使用示例：
.my-layout {
.make-grid(0.5rem);
.grid-cols("1fr");
@media (min-width: 768px) {
.grid-cols("repeat(2, 1fr)");
}
@media (min-width: 1024px) {
.grid-cols("repeat(4, 1fr)");
}
}用 .grid-item-span 控制跨行跨列（避免 magic number）
手写 grid-column: span 2 看似简单，但项目里常出现 span 3、span 4 散落在各处，后期改网格列数时极易漏改。
更隐蔽的问题是：用 grid-row 时忘了设 grid-row-start，导致浏览器按自动定位规则塞进空隙，视觉错位却查不出原因。
- 只暴露
@col-span和@row-span两个参数，其余留空让浏览器自动计算 - 不生成
grid-row-start或grid-column-start，除非业务强依赖起始位置 - 若需固定起始位置，另写
.grid-item-place(@col-start, @row-start)分离关注点
.grid-item-span(@col-span: 1, @row-span: auto) when (@row-span = auto) {
grid-column: span @col-span;
}
.grid-item-span(@col-span: 1, @row-span) when not (@row-span = auto) {
grid-column: span @col-span;
grid-row: span @row-span;
}为什么不用 calc() 或循环生成列宽？
Less 的 .each() 或 for 循环（通过插件）看似能生成 grid-template-columns: calc(100% / 3 - 2 * 0.5rem) 这类表达式，但实际会引入严重兼容性问题。
关键限制：CSS Grid 的 grid-template-columns 不接受含 calc() 的重复函数嵌套（如 repeat(3, calc(...))），部分旧版 Safari 直接忽略整条规则。
- Less 编译出的
calc()是静态字符串，无法响应视口变化，不如纯 CSS 媒体查询可靠 - 自动计算列宽会掩盖设计意图，比如 “中间栏固定 320px，其余均分” 就不该用
repeat()硬凑 - 真要动态列数？交给 JS 的
gridTemplateColumns属性或 CSS Container Queries（现代方案）
真正该花时间的地方，是定义好语义化类名（如 .grid--sidebar-main）和对应 mixin 组合，而不是试图让 Less 替你做设计决策。
