title: Evenly spaced grid dynamic content
body: <p>I'm going to have a grid of <code>&lt;div&gt;</code>s that are dynamically generated.  Each <code>&lt;div&gt;</code> will be the same width.  I want to evenly space them across their container.  And I want them to space 3 across, and then start again on the next line.  However, the final row may only have 1 or 2 <code>&lt;div&gt;</code>s in it, but they need to remain in the same 'grid spacing' as the above rows.</p>
  
  <p>Basically, I want table type spacing, without using tables :)</p>
  
  <p>Here's some example html.  The below would occur on 4 rows, with the final row only having 1 item</p>
  
  <pre><code>&lt;div id='container&gt;
       &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
      &lt;div class='item'&gt;Content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div#container {
     width:600px;
  }
  div.item {
     width:180px;
  }
  </code></pre>
  
  <p>I had tried the method at the bottom of <a href="http://css-tricks.com/equidistant-objects-with-css/" rel="nofollow">this page</a> but it fails when there's only 2 items in a row, because it puts the second item all the way to the right</p>