CMS动态多列布局用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现自适应流式排列，广告位需用grid-row/grid-column显式定位；避免auto-fill、span auto及IE兼容问题，结构可控是前提。
直接说结论：CMS动态输出的内容，用 display: grid + grid-template-columns + gap 就能搞定基础多列流式布局；若需在动态列表中插入固定位置的广告或推荐位，则必须用 grid-row 和 grid-column 显式定位——否则它永远排在最后。
动态列表自动换行但列数固定
这是 CMS 渲染商品/文章卡片时最常见需求：每行显示 3 个，容器变窄时自动减少列数，不靠 JS 或媒体查询硬切。
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))是核心——minmax(280px, 1fr)表示每列最小 280px，有空间就均分（1fr）；auto-fit会丢弃空轨道，只保留有内容的列 - 别用
auto-fill：它会预留所有可能列位，导致大量空白单元格，尤其在数据少时明显（比如只有 2 个 item 却撑出 4 列） -
gap必须设：它作用于网格项之间，不是 margin，不会触发重排，性能比给每个 item 加 margin 更优 - 避免对每个 item 设置
width：Grid 会忽略它，强行设反而干扰minmax()计算
在动态列表末尾插入的元素要显示在中间某格
CMS 循环生成所有 .red-box 后，再追加一个 .green-box，但你希望它出现在第二行第三列——默认它会排在最后一行末尾，因为 Grid 自动放置按 DOM 顺序填格。
- 给
.green-box加grid-row: 2和grid-column: 3 / span 2：表示起始行是第 2 行，起始列是第 3 列，跨 2 列（即占第 3、4 列） - 必须确保父容器已定义足够行列：如果
grid-template-columns只设了 3 列，grid-column: 3 / span 2会溢出到第 5 列，但浏览器仍渲染，只是可能被截断 - 不要依赖
grid-area简写去覆盖已有命名区域：除非你提前用grid-template-areas定义了区域名，否则grid-area: banner不生效 - 注意
grid-row值是行号，不是“第几行”：行号从 1 开始计数，且包含隐式生成的行（比如自动换行产生的新行）
性能与兼容性踩坑点
Grid 在现代浏览器里很稳，但几个细节不注意会白忙活：
立即学习“前端免费学习笔记（深入）”；
- IE 不支持 Grid（哪怕加前缀），如果项目还需兼容 IE11，别用
display: grid做主布局，改用 Flexbox + JS fallback -
grid-column: span auto看似方便，实则性能杀手：它让浏览器反复测量内容宽度来确定跨度，100 个 item 就测 100 次，滚动卡顿明显 - 避免在大量动态 item 上用
justify-self: center：单个 item 居中没问题，但 50 个都设，会增加 layout 计算量；统一用justify-items: center作用于容器更高效 - Grid 的隐式网格行/列默认是
auto高度，如果某 item 内容高度差异极大（比如图文混排），会导致整行被拉高，建议对关键 item 设min-height或用align-items: start控制基线
真正麻烦的从来不是怎么写 Grid 代码，而是 CMS 输出的 HTML 结构是否可控——如果后端把 .green-box 塞进循环里，或者包裹了多余层级，CSS 再精准也救不了 DOM 顺序。动手前先确认模板层能不能干净地输出扁平结构。
