title: Responsive grid with fixed column width
body: <p>I guess I have the simplest problem ever and cannot find a ready solution.</p>
  
  <p>I need to make a grid with fixed widths and fixed distance between them. </p>
  
  <p>I need x columns a 400px (x = total width/400), and during browser resizing I would need this grid to shrink, column by column (columns must always keep their width size and distance between them).</p>
  
  <p>The content flows over all columns and should spread out over all columns.</p>
  
  <p>That's why I don't like any open source grid system (Boostrap, Skeleton, etc.) they all use %width, and columns always change width on resizing.</p>
  
  <p>What would be the simplest way?</p>
  
  <p><strong>Edit/Clarification:</strong></p>
  
  <p>This is how it looks without columns: <a href="http://jsfiddle.net/xjrt8qrm/16/show/" rel="nofollow">http://jsfiddle.net/xjrt8qrm/16/show/</a></p>
  
  <pre><code>&lt;div&gt;See the fiddle&lt;/div&gt;
  </code></pre>
  
  <p>I want it to have x columns. x is the maximum possible amount of 400px columns, depending on the users resolution. I want only one row of columns, so the content spreads like on a newspaper from top to bottom.</p>
  
  <p>So it will look somehow like this on a PC: <a href="http://i.imgur.com/kmd620p.png" rel="nofollow">http://i.imgur.com/kmd620p.png</a> (You can ignore the text/comments there).</p>