<p dir="auto">Spacing seems to be hard coded to <code class="notranslate">xs</code> but there's code that calculates spacing for each breakpoint.</p>
<p dir="auto"><a href="https://github.com/mui-org/material-ui/blob/c3f222bf8c08e9607a32d5eb9161de5ed124780b/src/Grid/Grid.js#L187">https://github.com/mui-org/material-ui/blob/c3f222bf8c08e9607a32d5eb9161de5ed124780b/src/Grid/Grid.js#L187</a></p>
<p dir="auto">Is this something that just needs to be "turned on" or were there complications with exposing this?</p>
<p dir="auto">Hello,</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1443499/22936973/6b73451a-f2d7-11e6-9620-7ff7b684db13.jpg"><img src="https://cloud.githubusercontent.com/assets/1443499/22936973/6b73451a-f2d7-11e6-9620-7ff7b684db13.jpg" alt="we-need-to-go-deeper" style="max-width: 100%;"></a></p>
<h3 dir="auto">Description</h3>
<h4 dir="auto">Add extra flex properties on Layout</h4>
<p dir="auto">Currently, not all flex properties are supported.<br>
I think we could benefit to have them so we don't have to touch the CSS every time when dealing with layout only components.</p>
<p dir="auto">Missing properties : <code class="notranslate">grow</code>, <code class="notranslate">shrink</code>, <code class="notranslate">basis</code>, <code class="notranslate">flow</code>, <code class="notranslate">order</code></p>
<h4 dir="auto">Make the breakpoints properties (xs, sm, lg...) accept an object of subproperties</h4>
<p dir="auto">With the breakpoints properties, we have the control over the width of our components based on the screen resolution.<br>
It would be totally <em>awesome</em> to have control over all the flex properties based on the resolution.<br>
To do that, we could make the breakpoints properties accept an object of subproperties like this :</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Grid spacing={{ sm: 2, md: 4 }} alignItems={['center', 'flex-end']}&gt;
{/*...*/}
&lt;/Grid&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">spacing</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">sm</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">md</span>: <span class="pl-c1">4</span> <span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">alignItems</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">[</span><span class="pl-s">'center'</span><span class="pl-kos">,</span> <span class="pl-s">'flex-end'</span><span class="pl-kos">]</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">{</span><span class="pl-c">/*...*/</span><span class="pl-kos">}</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span></pre></div>
<h3 dir="auto">Images &amp; references</h3>
<p dir="auto"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout</a></p>