如何正确添加 Splide Grid 扩展实现网格布局

本文详解 splide grid 扩展的正确引入与配置方式，重点纠正 `mount()` 中误用 `window.splide.grid` 的常见错误，强调必须使用 `window.splide.extensions` 并确保 cdn 资源加载顺序与初始化逻辑无误。

Splide Grid 是官方提供的强大扩展，用于在滑块中构建响应式二维网格布局（如 2×2、3×1 等），但其启用需满足三个关键前提：正确的资源加载顺序、规范的配置结构，以及最关键的——正确的挂载方式。

✅ 正确的资源引入顺序（cdn 示例）

务必按以下顺序引入脚本（注意：Grid 扩展依赖 Splide 核心库，且不可颠倒）：

⚠️ 原问题中混用了 jquery 初始化（jQuery(function($) {…})）并错误引用了旧版 CDN（含 @splidejs/splide@latest 动态导入注释），这不仅冗余，还可能导致模块未就绪。Splide v4+ 是纯 ES 模块设计，完全不依赖 jQuery，应直接使用原生 JS 初始化。

✅ 正确的初始化与挂载方式

核心修正点：mount() 必须传入 window.splide.Extensions，而非 window.splide.Grid。后者并不存在于 Splide v4+ 的全局对象中，会导致扩展静默失效。

正确写法如下：

document.addEventListener('DOMContentLoaded', () => {   const splide = new Splide('#exmpale-slick', {     type   : 'loop',     height : '20rem',     gap    : '1em',     perPage: 2,     grid: {       rows: 2, // 行数（推荐使用 rows/cols 替代已废弃的 dimensions 数组）       cols: 2, // 列数       gap: {         row: '1em',         col: '1em'       }     },     breakpoints: {       600: {         height : '10rem',         perPage: 1,         grid: {           rows: 2,           cols: 1,           gap: { row: '.5em', col: '.5em' }         }       }     }   });    // ✅ 关键：挂载 Extensions 对象（Grid 已自动注册其中）   splide.mount(window.splide.Extensions); });

? 配置说明与注意事项

• grid.dimensions 已弃用：Splide 官方文档 v4+ 明确推荐使用 rows 和 cols 字段，语义更清晰，兼容性更好；
• html 结构需严格匹配：.splide__list 下的每个
• 即为一个网格单元，总数应 ≥ rows × cols（不足时 Splide 会自动补白）；
• 样式兼容性：确保未全局重置 .splide__slide 的 display 或 flex 属性，Grid 扩展依赖 display: grid 布局；
• 响应式调试技巧：在 breakpoints 中修改 grid 配置后，建议强制触发窗口 resize（window.dispatchEvent(new Event(‘resize’))）以验证断点切换效果。

✅ 最终验证

成功启用后，浏览器开发者工具中可观察到：

• .splide__track 元素上动态添加了 data-splide-grid 属性；
• .splide__list 的 display 计算值为 grid，且 grid-template-rows/columns 符合配置；
• 滑动时，整行/整列内容同步移动，而非单张卡片滚动。

遵循以上步骤，即可稳定启用 Splide Grid 扩展，构建灵活、语义化的响应式网格轮播组件。