title: Dynamic CSS grid for product overview eCommerce
body: <p>I'm trying to figure out a way to make a dynamic CSS grid to fill up whole "rows" even though there are no real rows. As you see in my fiddle, I've put the Ad as the 10th child in the markup which puts in in a new (the 3rd) "row" which results in a white space in the "row" above, this is expected behavior and I understand why this is happening.</p>
  
  <p>My question is, is there some clever way of getting each "row" to be filled up WITHOUT javascript libraries like Masonry. I've been playing around with all different kind of pseudo selectors but still success.</p>
  
  <pre><code>main {
    width: 1000px;    
  }
  
  article {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding-left: 12px;
    padding-right: 12px;
      margin-bottom: 20px;
  }
  
  .ad {
    width: 40%;
  }
  </code></pre>
  
  <p>Here's a JSFiddle link:
  <a href="https://jsfiddle.net/3w7qysn8/" rel="nofollow">https://jsfiddle.net/3w7qysn8/</a></p>