CSS GRID com Javascript em Slider

Tenho um grid de tres colunas com width de 33%. E são elementos com float left dentro de um div com sua largura calculada em javascript para que esses elementos fiquem em 3 linhas e eu consiga alterar o left do div que agrupa todos.

O div que agrupa todos está com position relative e os grids com flot left dentro desse elemento.

Vejam como se encontra:

/applications/core/interface/imageproxy/imageproxy.php?img=http://uploaddeimagens.com.br/images/000/354/604/original/grid.jpg?1410186721&key=7c6c3ac88450d2ace713824c47eb12884c74690ae3b864164dc7ddc538e9fb7d" alt="grid.jpg?1410186721" />

O que eu estou tento problema é em resoluções menores, ele vai calculando e as vezes sobra pixels na largura ficando assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://uploaddeimagens.com.br/images/000/354/611/original/grid.jpg?1410186900&key=07eab7668f4f5d3e1e74b43a407b0a2d69fbe030706966c674f402e5e2843916" alt="grid.jpg?1410186900" />

Ou assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://uploaddeimagens.com.br/images/000/354/618/original/grid.jpg?1410187061&key=1a9de418a3f81c779a4f4a7c7434beab8e4680b06133fbc9fef8e9d42c2bc520" alt="grid.jpg?1410187061" />

Segue o script, css e html:

var groups = 0, w = $("#pct_servicos .conteudo .row .col .groups").parent().width();
$("#pct_servicos .conteudo .row .col .groups .group .col").each(function(index, element) {
	groups += w/3;
});

$("#pct_servicos .conteudo .row .col .groups").css({ "width" : groups/3+"px" });
$("#pct_servicos .conteudo .row .col .groups .group").css({ "width" : ((groups/3)/3)+"px" });

.row .col { display: block; float: left; padding: 5px; height: 50px; line-height: 40px; }
#pct_servicos .conteudo .row .col .groups { display: block; height: 150px; }
#pct_servicos .conteudo .row .col .groups .group { float: left; height: 150px; }

<div class="row color_606060 padding_0_45">
	<a href="javascript: void(0);" class="arrow left icon-iconlayer-150-01 color_999999" data-direction="l"></a>
	<div class="col no_border_bottom width_100 padding_0" style="overflow: hidden; height: 150px;">
 <div class="groups">
 <div class="group">
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 </div>

 <div class="group">
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 </div>

 <div class="group">
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col no_border_bottom width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 <div class="col width_33 border_left border_top border_right">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 </div>
 </div>
	</div>
	<a href="javascript: void(0);" class="arrow right icon-iconlayer-151-01 color_999999" data-direction="r"></a>
</div>

Estrutura mais simples do html:

<div class="col no_border_bottom width_100 padding_0" style="overflow: hidden; height: 150px;">
	<div class="groups">
 <div class="group">
 <div class="col no_border_bottom width_33 border_left border_top">
 <div class="checkbox_big bordercolor_989898 color_02CEC4" data-value="1" style="float: left; margin-right: 10px; margin-top: 6px;"><input type="hidden"></div>
 <span class="icone backcolor_999999"></span>
 <div class="titval">
 <span class="titulo">Título</span>
 <span class="valor">R$ 1.000,00</span>
 </div>
 <a href="javascript: void(0);" class="info icon-iconlayer-31-01 color_999999"></a>
 </div>
 </div>
	</div>
</div>