DBGRID ListView - responsive items

[SISBLU Software]

Hello. How do I divide my grid into 4 columns (25%)? 

I can do it in UnimDBListGrid using CSS. But in DBGRID the CSS doesn't work

 

COD. GRID not WORK =

 

function store.load(sender, records, successful, operation, eOpts)
{

   var tpl=new Ext.XTemplate(
         '<div>', '<span style="display: inline-block; width: 100px; color: {color}">{itemName}</span>', '<span style="display: inline-block; width: 100px">{price}</span>','</div>;'+
         '<table style="table-layout: absolute;min-width:100%;height:40px;vertical-align:top;'+
         'left:0px;right:0px;top:0px;bottom:0px";'+
         '<tr>'+
          '<td style="border-radius: 8px;vertical-align:top;'+
          'left:1px;right:0px;top:1px;bottom:1px;'+
          'color:white;text-align:center;font-size:20px;'+
          'padding-top:20px; position:absolute;'+
          'background: {[this.getColor(values)]}">{0}</td>'+
           '</tr>'+
         '</table>',
   {
      getColor: function(values)
      {
        if(values[7]=='1') return ' #44db24';
        else return ' #0080FF';
      }
    }
);
Ext.defer(function(){
                        
  sender.grid.setColumns([
    {
      text: '',
      dataIndex: '0',
      flex:1,      
      xtype: 'templatecolumn',
      tpl: tpl   
      
      
    }
  ]);
  sender.grid.getColumns()[0].show();
 }, 500); 
}

 

Result:

 

 

But I need it like this in 4 columns.
I was able to do this in UnimDBListGrid, but I can't do it in DBGRID

 

See in UnimDBListGrid is WORK. It's the same code, but I add CSS to divide the columns

 

function beforeInit(sender, config)
{
   config.loadingText='Carregando...';
   config.cls='ListView';
   config.selectedCls=''; 
   
    config.itemTpl = new Ext.XTemplate
  (                                                                 
     
       '<table style="table-layout: absolute;min-width:100%;height:40px;vertical-align:top;'+
        'left:0px;right:0px;top:0px;bottom:0px";'+
        '<tr>'+
          '<td style="border-radius: 8px;vertical-align:top;'+
          'left:1px;right:0px;top:1px;bottom:1px;'+
          'color:white;text-align:center;font-size:20px;'+
          'padding-top:20px; position:absolute;'+
          'background: {[this.getColor(values)]}">{0}</td>'+
           '</tr>'+
      '</table>',
   {
      getColor: function(values)
      {
        if(values[1]=='Aguardando Pag.') return ' red';
        else  if(values[1]=='Pedido Aberto') return ' red'; else return ' #0080FF';
      }
    }
);  
  
     }

 

-------CSS

.ListView {
    background: white !important;
   border: 3px solid white !important;
   border-style: solid!important;
   box-shadow: 0px 0px 0px white !important;
  }   

.ListView .x-listitem {
    display: inline-block !important;
      min-width: 25% !important;
   border: 3px solid white !important;
   border-style: solid!important;
   box-shadow: 0px 0px 1px white !important;
  }