title: Grid/Box View to fit all screen size
body: <p>My code as below:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="gridContainer"&gt;
   &lt;div class="grid"&gt;&lt;/div&gt;
   &lt;div class="grid"&gt;&lt;/div&gt;
   &lt;div class="grid"&gt;&lt;/div&gt;
   &lt;div class="grid"&gt;&lt;/div&gt;
   &lt;div class="grid"&gt;&lt;/div&gt;
   &lt;div class="grid"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.gridContainer{
   clear: both;
   width: 100%;
  }
  .grid{
   width: 100px;
   height: 100px;
   float: left;
  }
  </code></pre>
  
  <p>The grids will move up/down when the screen size varies either bigger or smaller since there is float left in the grids.
  However, there will be some extra spacing on the right side when there is not enough space to fit any grid into it.</p>
  
  <p>Any suggestion on how to calculate the grids width to fit all the screen size?</p>
  
  <p>Thanks!</p>