CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bhupesh
bhupesh

Reputation: 104

manage space between divs (dynamic height, float left)

I have multiple dynamic left aligned divs in my page, since the divs are dynamic so the heights will be different. I want to manage the empty space between divs . please tell me how to do it with css or javascript. Please see below image (it is just for explanation)

enter image description here

Upvotes: 0

Views: 155

Answers (2)

vakho papidze
vakho papidze

Reputation: 465

One way is: You can do three column and add every third div per column.

Second way is: 'Masonry.js', that i use often. http://masonry.desandro.com/ its easy so i recomend it:

Html: 

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
</div>

css: 

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

jquery:

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

Upvotes: 1

Ivan Demchenko
Ivan Demchenko

Reputation: 457

This is called Masonry layout. Try to look at flexbox or column layout. Here are some examples:

Upvotes: 1

Related Questions