Question

I am trying to create framework for vacancies listing in pinterest-like way (infinite 5-columns wall with vacancies description) in Twitter Bootstrap using ruby-on-rails.

But I have a problem – there are whitespaces between row’s elements , like here:
https://i.stack.imgur.com/PStrE.png

I need to delete these whitespaces to show continuous canvas.

Code I use to generate wall:

<div class="row">
  <% @employer_vacancies.reverse.each do |employer_vacancy| %>
    <div class="span2 hero-unit left">
      <h2 style="margin-bottom:0px !important";> 
        <%= employer_vacancy.vacancy_title %>  
      </h2>     
      <br>
      <%= employer_vacancy.vacancy_description %>
     </div>
  <% end %>
</div>

I believe it could be achieved by JavaScript, or maybe even by CSS.

Answer 1

CSS can’t do this if the number of columns is variable, and you need it work in all common browsers.

Instead, use jQuery Masonry: http://masonry.desandro.com/

There’s also a no-framework version, Vanilla Masonry: http://vanilla-masonry.desandro.com/