本文详解 splide grid 扩展的正确引入与配置方式，重点纠正 `mount()` 中误用 `window.splide.grid` 的常见错误，强调必须使用 `window.splide.extensions` 并确保 cdn 资源加载顺序与初始化逻辑无误。
Splide Grid 是官方提供的强大扩展，用于在滑块中构建响应式二维网格布局（如 2×2、3×1 等），但其启用需满足三个关键前提：正确的资源加载顺序、规范的配置结构，以及最关键的——正确的挂载方式。
✅ 正确的资源引入顺序（CDN 示例）
务必按以下顺序引入脚本（注意：Grid 扩展依赖 Splide 核心库，且不可颠倒）：
<!-- 1. Splide 核心库（必需） --> <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script> <!-- 2. Grid 扩展（必需） --> <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-grid@0.8.4/dist/js/splide-extension-grid.min.js"></script> <!-- 注意：无需额外引入 jQuery（Splide v4+ 已移除 jQuery 依赖） -->
⚠️ 原问题中混用了 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 扩展，构建灵活、语义化的响应式网格轮播组件。
