title: Masonry grid with triangles?
body: <p>Is it possible to create a masonry grid such as Packery but using triangles either done via CSS or SVG's? I'm able to do this successfully, however aligning the triangles next to each other so there's no gaps seems to be a challenge.</p>
  
  <p>I have the following: </p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item ud"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>.item</code> represents an equilateral triangle and the <code>.ud</code> class just flips it upside down. My first thought was to just use negative margin to pull the triangles next to each. But the triangles will vary in size.</p>