Sort html with grid Angularjs

Question

I need a hint on how to sort elements in my home without appearing blank spaces. The problem is: I have a page that lists all the registered services, this page is with pagination that lists the elements 8 per page, so far everything ok, list perfectly the elements, the point is that appear blank spaces that are not desired, they occupy spaces that could be occupied by listed elements.

<h3 ng-if="services.length == 0">Nenhum serviço encontrado.</h3>
					<div class="col-4 col-no-left" ng-repeat="service in services">
						<a class="service-card"  href="{{ service.url }}">
							<p class="title " >{{service.name}}</p>
							<p ng-bind-html="service.description | limitTo:150 "><p>{{service.description.length >= 15 	? "..." : " "}}</p><p class="btn">ver mais</p></p>
							<span ng-repeat="category in service.categories">{{ category.name }}.</span>
						</a>
					</div>

This block is what I organize the elements in the views. I looked for some solutions, saw about masonry and about the UI-grid, but did not find a step by step how to install and configure them. Grateful for the attention!

Answer 1

I made an example here using the ui-grid.

You just need to include your data in the property data of the attribute ui-grid in your HTML.

The result is as follows:

(function() {
  'use strict';

  angular
    .module('appExemploTabela', ['ui.grid']);

  angular
    .module('appExemploTabela')
    .controller('TabelaController', TabelaController);

  TabelaController.$inject = [];

  function TabelaController() {
    var tabela = this;
    
    iniciar();
    
    function iniciar() {
      tabela.registros = [];
      tabela.registros.push({id: 1, nome: 'Registro 1'});
      tabela.registros.push({id: 2, nome: 'Registro 2'});
      tabela.registros.push({id: 3, nome: 'Registro 3'});
      tabela.registros.push({id: 4, nome: 'Registro 4'});
      tabela.registros.push({id: 5, nome: 'Registro 5'});
      tabela.registros.push({id: 6, nome: 'Registro 6'});
      tabela.registros.push({id: 7, nome: 'Registro 7'});
      tabela.registros.push({id: 8, nome: 'Registro 8'});
      tabela.registros.push({id: 9, nome: 'Registro 9'});
      tabela.registros.push({id: 10, nome: 'Registro 10'});
    }
  }
})()

.minha-tabela {
  width: 500px;
  height: 250px;
}

<link rel="styleSheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.9/ui-grid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.9/ui-grid.js"></script>

<div ng-app="appExemploTabela">
  <div ng-controller="TabelaController as tabela">
    <div ui-grid="{data: tabela.registros}" class="minha-tabela"></div>
  </div>
</div>