Mostrar los objetos de un array en varias columnas

Hola, tengo un array donde a través de una lista me muestra una serie de objetos, en el ejemplo son fotos, pero me muestra un sólo objeto por fila, en las filas si tengo establecido cuantas quiero que me muestre por página, pero no sé como hacer lo mismo para las columnas y que en vez de un objeto por fila que me muestre varios, con el fin de aprovechar mejor el espacio.
saludos

Código CSS :

#principal UL {
   BACKGROUND-COLOR: yellow;
   PADDING-TOP: 10px;
   PADDING-RIGHT: 0px;   
   PADDING-BOTTOM: 10px;
   PADDING-LEFT: 7px;
   margin-top: 30px;
   margin-right: auto;
   margin-left: auto; 
   WIDTH: 575px;
   OVERFLOW: hidden;
}
#principal li { 
   display:inline; 
   float:left; 
   width:110px; 
   background-color:#f5f7f9; 
   padding:5px; 
   margin:10px; 
   text-align: center; 
   border-right: #a5a7aa solid 1px; 
   border-bottom: #a5a7aa solid 1px;   
} 

Código Javascript :

var nombre = [["foto1","comentario"],
                ["foto2","comentario"],
                ["foto3","comentario"],
                ["foto4","comentario"],
                ["foto5","comentario"],
                ["foto6","comentario"],
                ["foto7","comentario"],
                ["foto8","comentario"],
                ["foto9","comentario"]];

var filas = 3;
var columnas = 4;

var Pagify = function(pArray, pCounter)
{
    var array = pArray;
    var pointer = 0;
    var btnPrevious;
    var btnNext;
    var btnFirst;
    var btnLast;
    var counter = pCounter;
    var self = this;
       
    this.canNext = function()
    {
        return (pointer + counter < array.length);      
    }
    
    this.canPrevious = function()
    {
        return (pointer >= counter);    
    }
    
    this.first = function()
    {        
        pointer = 0;
        self.show();
    }
     this.last = function()
    {
        var multiply = Math.floor(array.length / counter)-1;        
        pointer = counter * multiply;
        self.show();
    }    
    this.next = function()
    {    
        if (self.canNext())
        {
            pointer += counter;
            self.show();
        }
    }
    
    this.previous = function()
    {
        if (self.canPrevious())
        {
            pointer -= counter;
            self.show();
        }
    }
    
    this.setPreviousButton = function(buttonId)
    {
        btnPrevious = document.getElementById(buttonId);
        btnPrevious.onclick = self.previous;
    }
    
    this.setFirstButton = function(buttonId)
    {
        btnFirst =document.getElementById(buttonId);
        btnFirst.onclick = self.first;
    }
    
     this.setLastButton = function(buttonId)
    {
        btnLast = document.getElementById(buttonId);
        btnLast.onclick = self.last;
    }
    
    this.setNextButton = function(buttonId)
    {
        btnNext =document.getElementById(buttonId);
        btnNext.onclick = self.next;
    }
    
    this.show = function()
    {        
           document.getElementById("lNombres").innerHTML = "";
        
        for(var i = pointer; i < pointer + counter && i < array.length ; i++)
        {
         
         document.getElementById("lNombres").innerHTML += " \
   <div id=principal><ul><li><img src=images/" + array[i][0] + ".jpg \
   <span>" + array[i][1] + "</span></li> \
   </ul></div>";      
   }
   
        btnPrevious.disabled = !self.canPrevious();
        btnNext.disabled = !self.canNext();
        btnFirst.disabled = !self.canPrevious();
        btnLast.disabled = !self.canNext(); 
      
      
   }    
}

    window.onload = function()
{    
    var pagify = new Pagify(nombre, filas);
    
    pagify.setPreviousButton("botanterior");
    pagify.setNextButton("botsiguiente");   
    pagify.setFirstButton("botprimero");   
    pagify.setLastButton("botultimo");   
    pagify.show();    
}