Estou desenvolvendo um site e nele criei uma área de serviços onde através de CSS, HTML, PHP e Laravel exibo o conteúdo de forma dinâmica, faço um foreach...
Como não limito quantos registros o usuário pode incluir ele consegue incluir quantos quiser o que me gera um problema de Layout quando ele não inclui de 3 em 3, vejam na imagem ...
Como podem ver, só existe 4 registros cadastrados sendo que o ultimo ficou na parte de baixo da tela o que acabou gerando um espaço em branco na direita.
Por isso pergunto: Como faço para ajustar? existe alguma forma de obter através de javascript o tamanho do espaço em branco para que eu consiga ajudar a Box via CSS?
Codigo do HTML / Blade
<section class="servicos">
<div class="container">
<div class="row text-center">
<h2><i class="fa fa-briefcase" aria-hidden="true"></i> S e r v i c o s </h2>
<hr>
</div>
</div>
<div class="col-xs-12">
<div class="container">
@forelse($servicos as $dados_servicos)
<div class="col-xs-4">
<div class="box col-xs-12">
<div class="icone text-center">
<i class="fa {{$dados_servicos->caminhoicone}} fa-4x" aria-hidden="true"></i>
</div>
<h3 class="text-center titulo">{{$dados_servicos->titulo}} </h3>
<p class="texto">{!!$dados_servicos->post!!} </p>
</div>
</div>
@empty
Nenhum Serviço Cadastrado
@endforelse
</div>
</div>
</section>
CSS
.servicos .box{
border-radius: 3%;
text-align: center;
margin-left: 6%;
margin-top: 10px;
width: 300px;
height: 300px;
background-color:#a09f9d;
font-family: "Roboto-Light";
float: left;
/*background-color: rgba(255, 255, 255, .4);*/
cursor: pointer;
}
.servicos .box:hover{
box-shadow: 15px 15px 15px 15px rgba(0, 0, 0, 0.3);
transition: all 1.0s ease;
}
.servicos .box .icone{
margin-top: 10px;
color: white;
}
.servicos .box .titulo{
color:white;
font-family: "Roboto-Light";
overflow: hidden;
font-weight: bold;
}
.servicos .box .texto{
position: relative;
font-family: "Roboto-Light";
color: white;
margin-top: 10px;
overflow: hidden;
}