title: Responsive Grid Layout Framework
body: <p>I want an easy to use grid framework for my current web project. These are the features i would appreciate:</p>
  
  <ul>
  <li><strong>fluid grid layout</strong>: boxes that can be aligned horizontally (side by side), each having the same height (for example a 3-column layout), working with 100% width</li>
  <li><strong>responsiveness</strong>: adapts automatically when resizing the browser window</li>
  <li><strong>mobile devices</strong>: shows an alternate fitting layout for pads and mobile phones</li>
  <li><strong>text size</strong>: optionally adjust text sizes dynamically (for example full width headlines)</li>
  <li><strong>image size</strong>: optionally adjust images sizes dynamically (for example full width image galleries)</li>
  <li><strong>breakpoints</strong>: optionally define width values which trigger events which alter the layout (for example removing buttons if the width is fallen below a threshold)</li>
  </ul>
  
  <h2>Update</h2>
  
  <p>I found many grids, but narrowed it down to the following three promising frameworks that might be a good fit for my requirements:</p>
  
  <ul>
  <li><a href="http://foundation.zurb.com/" rel="noreferrer"><strong><code>Foundation</code></strong></a></li>
  <li><a href="http://semantic.gs/" rel="noreferrer"><strong><code>Semantic Grid</code></strong></a></li>
  <li><a href="http://goldengridsystem.com/" rel="noreferrer"><strong><code>Golden Grid System</code></strong></a></li>
  </ul>
  
  <p>Here are all the others:</p>
  
  <ul>
  <li><s><a href="http://cssgrid.net/" rel="noreferrer">CSS Grid</a></s> (not fluid)</li>
  <li><s><a href="http://stuffandnonsense.co.uk/projects/320andup/" rel="noreferrer">320 and Up</a></s> (not fluid)</li>
  <li><s><a href="http://www.columnal.com/" rel="noreferrer">Columnal</a></s> (not fluid)</li>
  <li><s><a href="http://www.getskeleton.com/" rel="noreferrer">Skeleton</a></s> (not fluid)</li>
  <li><s><a href="http://simplegrid.info/" rel="noreferrer">SimpleGrid</a></s> (not fluid)</li>
  <li><s><a href="http://lessframework.com/" rel="noreferrer">Less Framework</a></s> (not fluid)</li>
  <li><s><a href="http://twitter.github.com/bootstrap/" rel="noreferrer">Bootstrap</a></s> (non-semantic classes)</li>
  <li><s><a href="http://xoxco.com/projects/code/breakpoints/" rel="noreferrer">Breakpoints.js</a></s> (only breakpoints, too similar to media queries)</li>
  <li><s><a href="http://adaptive-images.com/" rel="noreferrer">Adaptive images</a></s> (only images)</li>
  <li><s><a href="http://fittextjs.com/" rel="noreferrer">FitText</a></s> (only text)</li>
  <li><s><a href="http://www.gridsetapp.com/" rel="noreferrer">Gridset</a></s> (commercial)</li>
  <li><s><a href="http://html5boilerplate.com/" rel="noreferrer">HTML5 Boilerplate</a></s> (old)</li>
  </ul>
  
  <p>Normally, i would test them myself before asking here so that i can formulate more specific questions. But due to the vast amount of frameworks i'd like to hear some pointers where to begin.</p>
  
  <ol>
  <li><strong>How are your experiences with these or other similar frameworks?</strong></li>
  <li><strong>Do you recommend a specific framework that matches my requirements?</strong></li>
  </ol>
  
  <h2>Solution</h2>
  
  <p>I ended up using <a href="http://foundation.zurb.com/" rel="noreferrer"><strong><code>Foundation</code></strong></a> which is clearly the winner in this race - in my humble opinion.</p>
  
  <h2>Update 2</h2>
  
  <p><a href="http://getbootstrap.com/" rel="noreferrer">Bootstrap 3</a> is a real competition now, because it supports semantic grid classes too. And it supports SASS as well as LESS.</p>