tidy up contents in the views and delete the white spaces that are appearing

Question

I have the problem of listing elements in my views, these elemntos should appear together with no white spaces that separate them. To solve this question I tried to use masonry, unsuccessfully, and I have no idea how to do this tidying up!

<div id="services">
   <div class="box" ng-repeat="service in services">
       <div class="col-5">
          <a class="service-card"  href="{{ service.url }}">
            <h3>{{service.name}}</h3>
                <p ng-bind-html="service.description | limitTo:150 " ><p>{{service.description.length >=   150  ? "..." : " "}}</p><p class="btn">ver mais</p></p>
                <span ng-repeat="category in service.categories">{{ category.name }}.</span>
            </a>
        </div>
    </div>
</div>

This code snippet is responsible for controlling the appearance of the elements in the views. Grateful for the attention!

Answer 1

Unfortunately I had no help here, grateful for the correction made in formatting the code I exposed. So that the same case that I asked is with solution I will post the solution that I found.

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
   <div class="col-6" style="width: 250px;height: 350px; padding: 0;margin: 0;text-align: center;" ng-repeat="service in services">
	  <a class="service-card" href="{{ service.url }}">
		<h3 class="title" >{{service.name}}</h3>
		<p ng-bind-html="service.description | limitTo:150 " style="list-style: none;margin: 24px;display: inline-block;font-size: 2em;" ><p>{{service.description.length >=   1 	? "..." : " "}}</p><p class="btn">ver mais</p></p>
	    <span ng-repeat="category in service.categories">{{ category.name }}.</span>
	</a>
  </div>
</div>

Okay, this code can list the elements and eliminate the blank holes that appeared!