title: Fullscreen bootstrap grid with different sizes
body: <p>I'm trying to create a fullscreen bootstrap grid with different heights (33.33%, 66.66% or 100%) and different widths (20%, 40%, 60%, 80%, 100%).</p>
  
  <p>The problem is that because of the height difference gaps occur.</p>
  
  <p><a href="http://www.bootply.com/BXENv65tq8#" rel="nofollow noreferrer">http://www.bootply.com/BXENv65tq8#</a></p>
  
  <p><img src="https://i.stack.imgur.com/Nmxuw.jpg" alt="enter image description here"></p>
  
  <p>I found a couple of solutions already but none of them are realy working like they should: wrong margins, cannot get it fullscreen,...</p>
  
  <p><a href="https://stackoverflow.com/questions/12117195/masonry-style-layout-only-with-css">Masonry-style Layout ONLY with CSS</a></p>
  
  <p>My result (from highest rated anwer):</p>
  
  <p><img src="https://i.stack.imgur.com/EkqM3.jpg" alt="enter image description here"></p>