<div class="p-example__body">
  <div class="p-example__splide">
    <div class="splide" id="example-grid">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">01</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">02</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">03</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">04</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">05</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">06</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">07</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">08</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">09</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">10</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">11</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">12</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">13</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">14</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">15</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">16</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">17</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">18</span></li>
          <li class="p-splide__slide splide__slide"><span class="p-splide__slide-number">19</span></li>
        </ul>
      </div>
    </div>
  </div>
</div>

.p-example {
  &__body {
  background: #d4e735;
  overflow: hidden;
  color: #333;
  }
  &__splide {
    padding: 3rem 2rem;
    @media screen and (min-width: 768px) {
      padding: 4rem;
    }
  }
}

.p-splide {
  &__slide {
    position: relative;
    color: #fff;
    border-radius: .5rem;
    border: 3px solid #eef5ae;
    background: #dceb5d;
    overflow: hidden;
    line-height: 1.5;
    transition: border-color .15s cubic-bezier(.54,.01,.1,1),background-color .15s cubic-bezier(.54,.01,.1,1);
  }
  &__slide-number {
    position: absolute;
    bottom: .15em;
    left: .5rem;
    font-family: 'Lato', sans-serif;
    font-size: 1.7rem;
    line-height: .75;
    font-weight: bold;
    @media screen and (min-width: 768px) {
      left: 1rem;
      font-size: 3.2rem;
    }
  }
}

.splide {
  &__slide {
    &.is-active {
      .p-splide__slide {
        background: #13c59d;
        border-color: #13c59d;
      }
    }
  }
  &__pagination {
    bottom: -2.3rem;
    left: 50%;
    transform: translateX(-50%);
    &__page {
      padding: 0;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #93a313;
      margin: .4em;
      cursor: pointer;
      display: block;
    }
  }
}

import Splide from "https://cdn.skypack.dev/@splidejs/splide@2.4.21"
import Grid from "https://cdn.skypack.dev/@splidejs/splide-extension-grid@0.2.0"

new Splide( '#example-grid', {
  type: 'loop', // スライダーの種類 @type: { string }, default: 'slide'
  height: '20rem', // スライダーの高さ @type: { number }, default: ０
  gap: '1em', // スライド間のギャップサイズ @type: { number|string }, default: ０
  perPage: 2, // 1ページに表示するスライドの数 @type: { number }, default: ０
  perMove: 1, // スライダーが移動するスライドの数 @type: { number }, default: ０
  grid: {
    dimensions: [ [ 1, 1 ], [ 2, 2 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 3, 2 ] ], // 配列としてのディメンション（行と列）のコレクション @type: { Array|boolean }, default: false
    gap: { // オブジェクトとしての行と列のギャップサイズ @type: { Object }, default: {}
      row: '1em', // 行の数 @type: { number }, default: 1
      col: '1em' // 列の数 @type: { number }, default: 1
    }
  },
  breakpoints: {  // ブレークポイントの定義
    600: {
      height: '10rem',
      perPage: 1,
      grid: {
        dimensions: [ [ 2, 2 ], [ 1, 1 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 1, 3 ], [ 3, 1 ] ],
        gap: {
          row: '.5em',
          col: '.5em'
        }
      }
    }
  }
} ).mount( { Grid } )