title: How to organize material-ui Grid into rows?
body: <p>I'm using <strong>material-ui</strong> to do a form, using the <code>Grid</code> system I'd like to do the following:</p>
  
  <pre><code>&lt;Grid container&gt;
      &lt;Grid item xs={4} /&gt;
      &lt;Grid item xs={4} /&gt;
      &lt;Grid item xs={4} /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>And be able to put the first 2 items, on the first row and the third on a second row, the only way I found to do it is:</p>
  
  <pre><code>&lt;Grid container&gt;
      &lt;Grid item xs={4} /&gt;
      &lt;Grid item xs={4} /&gt;
  &lt;/Grid&gt;
  &lt;Grid container&gt;
      &lt;Grid item xs={4} /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>What is the better way to stack <strong>material-ui</strong> <code>Grid</code> into rows (like the row class concept in <strong>Bootstrap</strong> grid)?</p>
  
  <p>I also thought about these options:</p>
  
  <ul>
  <li><p>filling the first row with empty <code>Grid</code> item?</p></li>
  <li><p>putting vertical container?</p></li>
  </ul>