HTML

The most of job is done by Javascript, so HTML code looks simple - just one container for the grid and a div for the grid.

<div class="gridbox">
        <div id="wrp"></div>
    </div>

CSS

The grid div is going to move, so its position property is set absolute. The container grid box is set { position:relative; overflow:hidden;}, so that parts of moving cells could be hidden on the 2 sides.

.gridbox{
    position:relative;
    overflow:hidden;
    border:1px solid #ffb6c1;
    margin-right:25px;
    color:#708090;
}
#wrp{
    position:absolute;
}

Javascript

In order to design the scirp, I added 2 methods apendcolumns and insertcolumns for the grid object. The method apendcolumns appends a number of columns in existing grid. The method insertcolumns inserts a number of columns before the first column of the existing grid.

Create grids

The grid is created with grid object. The left attribute of grid div is set so as the same columns of the grids are hidden on the 2 sides of the gridbox .

var pggrid = new jsgrid();
pggrid.init({
        id: "wrp",
        rows: 5,
        columns: 15,
        width: 30,
        height: 30,
        center:true,
        backgroundColor: "#90ee90",
        gutter: 1       
});

var ww = (pggrid.style.width + pggrid.style.gutter) * pggrid.style.rows;
$("wrp").style.left = "-"+ww+"px";
$("wrp").parentNode.style.width = ww+1+"px";
$("wrp").parentNode.style.height = ww+1+"px";

pggrid.setguttercolor("#fff");

Initialize the grid

Fill in the numbers in the grid cells including those hidden on the 2 sides.

var colm = pggrid.getcolumns(5,6,7,8,9);
for (var i=0; i < colm.length; i++) { 
    colm[i].innerHTML =i+40; 
} 
setleft();
setright(1);

function setleft(){
    k = 1;
    var colm = pggrid.getcolumns(5*k,5*k+1,5*k+2,5*k+3,5*k+4);
    var a = parseInt(colm[0].innerHTML) - colm.length;
    k = 0
    var cola = pggrid.getcolumns(5*k,5*k+1,5*k+2,5*k+3,5*k+4);

    for (var i=0; i < cola.length; i++) { 
        cola[i].innerHTML =i+a; 
    } 
}

function setright(k){   
    var colm = pggrid.getcolumns(5*k,5*k+1,5*k+2,5*k+3,5*k+4);
    var b = parseInt(colm[colm.length-1].innerHTML) + 1;
    k = k+1
    var colb = pggrid.getcolumns(5*k,5*k+1,5*k+2,5*k+3,5*k+4);

    for (var i=0; i < colb.length; i++) { 
        colb[i].innerHTML =i+b; 
    } 
}

The values of 2 sides cells are filled with setleft and setright functions.

Add event for moving left

The grid moves to the left in 700 milliseconds. Callback function is set when there's no hidden columns on the right side, append new columns on the right of the grid although they are hidden at the moment.

function moveleft(e){ 
      counter++;
      if (counter > 1) return;
      var lt = parseInt($("wrp").style.left);
      var left = lt - ww;
      $("wrp").move({delay:700,to:{left:left,top:0}},function(){
         
         if (-parseInt(this.style.left)==this.offsetWidth -1 - ww) {
             k = -parseInt(this.style.left)/ww;
             pggrid.appendcolumns(5);
             setright(k);
         }   
        counter = 0;        
      });
}

The values of the new columns are also produced by setright function..

Add event for moving right

The grid moves to the right in 700 milliseconds. Callback function is set when there's no hidden columns on the left side, insert new columns on the right of the grid although they are hidden at the moment.

function moveright(e){    
     counter++;
     if (counter > 1) return;
      var lt = parseInt($("wrp").style.left);
      var left = lt + ww;
      $("wrp").move({delay:700,to:{left:left,top:0}},function(){
         if (this.style.left=="0px") {
             pggrid.insertcolumns(5);
             this.style.left = "-"+ww+"px";
             setleft();
         }        
      counter = 0;     
      });
}

The values of the new columns are also produced by setleft function.

Demo

Grid horizontal move.