怎么用JS往<style></style>里写CSS Grid规则
直接操作document.styleSheets太麻烦，容易跨域报错或索引错乱；最稳的方式是创建新的<style></style>标签，用textContent写入生成的CSS字符串。
关键点在于：Grid的grid-template-columns和grid-template-rows必须是合法CSS值，不能拼错单位、括号或函数名（比如repeat()少个括号就整个失效）。
- 先用JS算好列数/行数、间距、响应式断点，再拼成字符串
- 把
<style id="dynamic-grid"></style>插入，方便后续替换：document.getElementById('dynamic-grid').textContent = newCSS - 避免重复插入——每次更新前先查有没有同id的
<style></style>，有就复用，没有再新建
repeat()动态拼接时最容易漏掉什么
常见错误是把repeat(3, 1fr)写成repeat(3, '1fr')或repeat(${n}, 1fr)——单引号、模板字符串里的空格、数字类型传错都会让浏览器静默忽略整条规则。
更隐蔽的是repeat(auto-fit, minmax(200px, 1fr))这类响应式写法：JS里拼串时minmax()的逗号前后不能有多余空格，否则解析失败（Chrome会报Invalid property value但不提示具体哪行）。
立即学习“前端免费学习笔记（深入）”；
- 用
String.raw包裹模板字符串，避免转义干扰（比如\n被误当换行） - 列宽数组如
[200, '1fr', '2fr']要统一转成字符串再join，别混用数字和字符串 - 调试时把生成的CSS复制进DevTools的
Elements > <style></style>里手动粘贴，看是否生效——这是最快定位拼写问题的方法
为什么不能用element.style.gridTemplateColumns设动态网格
因为element.style只能设内联样式，而Grid很多能力（比如grid-area命名、@media嵌套、跨元素对齐）必须靠CSS规则生效。更重要的是：style.gridTemplateColumns不支持repeat()以外的复杂语法，像subgrid或fit-content()一设就丢。
- 内联样式优先级高，但无法响应父容器变化（比如窗口缩放时没法触发重算）
- 如果网格结构随数据量变化（比如从3列变5列），每次改
style都要遍历所有子元素重设grid-column，性能爆炸 - 真正需要动态的，是整套规则——所以必须走
<style></style>，而不是单个元素的style属性
移动端适配时grid-template-columns怎么安全换行
别在JS里硬编码@media (max-width: 768px)，而是用CSSStyleSheet.insertRule()配合window.matchMedia监听，否则窗口缩放时样式不会自动切换。
更实际的做法是：生成两套CSS字符串（桌面版+移动版），用matchMedia监听，触发时直接替换<style></style>内容——比写一堆if/else判断宽度干净得多。
-
matchMedia('(max-width: 768px)').addEventListener('change', handler)是现代标准，IE用addListener - 移动端常需
minmax(250px, 1fr)保底，但JS计算时别把250px写死，留个配置项让用户传入最小列宽 - 注意Safari对
subgrid支持仍有限，生成CSS前先检查CSS.supports('display', 'grid') && CSS.supports('grid-template-columns', 'subgrid')
px而不是rem都可能让整块布局塌掉。 
