title: Make a grid responsive to its parent width
body: <p>I have an HTML structure like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="row"&gt;
        &lt;div class="half-row"&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="half-row"&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
           &lt;div class="cell"&gt;
             ..content..
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>where class 'row' has width: 100% of its parent and the parent width will change over time.</p>
  
  <p>My goal is that the two divs with a "half-row" class must be in-line and occupy 50% of the "row" div. If the size of the "row" div goes below 640px (so the half-row will be &lt; 320px) the two half-row class divs have to stack and each of them occupies 100% of the available space.
  In both cases, the internal div ("cell" class) must equally divide the available space.</p>
  
  <p>Every suggestion is welcome. Thank you</p>