title: different positioned columns css
body: <p>There are some plugins to make pintrest style columns that are basically calculating where to place the divs with unique absolute positioning for every element. My design is more simple and I would think there should be a css3 solution...</p>
  
  <p>Can you make every other column pushed down like 20px? The design is responsive so depending on browser size will depend on how many columns there are so I would not just want to wrap every column in a div and move it down...</p>
  
  <p><a href="http://jsfiddle.net/3eVHU/1/" rel="nofollow noreferrer">http://jsfiddle.net/3eVHU/1/</a></p>
  
  <pre><code>$('.container div').each(function() {
          if($(this).prev().length &gt; 0) {
              if($(this).position().top != $(this).prev().position().top) return false;
              listInRow++;
          }
          else {
              listInRow++;   
          }
      });
  </code></pre>
  
  <p>so somehow in my fiddle I would need a way to calculate the number of divs in the first row only and position every other element / row downward just a bit just like in this pic below</p>
  
  <p><img src="https://i.stack.imgur.com/GMo0p.jpg" alt=""></p>
  
  <p>Is there any way to do this simply or would I still need to use something like masonry or another pintrest style reproducing library?</p>