How to Reserve a Custom Arrow Box Space in a SplideJS Grid Layout?

Question

I am working on implementing a custom grid layout using SplideJS with the Grid extension where I need to reserve space for a custom arrow box for navigation. The layout consists of two rows of slides, with the first row containing four slides. In the second row, I want the first cell to be a dedicated arrow box and the next three cells to be slides. The layout looks something like this:

First row: Slide 01, Slide 02, Slide 03, Slide 04 Second row: Arrow Box, Slide 05, Slide 06, Slide 07

I have managed to create the two rows of slides, but I am struggling with reserving the space for the arrow box. Here is the code I've used to initialize the SplideJS grid:

desired output

new Splide('#splide', {
  type: 'grid',
  grid: {
    rows: 2,
    cols: 4,
  },
  // other options...
}).mount();

I want the arrow box to be part of the grid, not floating or absolutely positioned over the slider. I expected to be able to somehow designate a cell for the arrow box, but I'm not sure how to proceed with SplideJS grid configuration or custom CSS to achieve this.

Has anyone encountered a similar issue or have suggestions on how to reserve a space for an arrow box within a SplideJS grid layout?