title: Creating a Custom Styled Prop Using Styled-System
body: <p><code>Styled-System</code> has a number of props relating to <code>css grid</code>: <a href="https://styled-system.com/api/#grid-layout" rel="nofollow noreferrer">https://styled-system.com/api/#grid-layout</a></p>
  <p>I would like to add, though, a prop called <code>gridWrap</code>.  My vision is to take the following CSS code and enable someone to modify the <code>auto-fit</code> value vis-a-vis the <code>gridWrap</code> prop.  First, here is the base code:</p>
  <pre><code>grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
  </code></pre>
  <p>My vision is that the prop <code>gridWrap</code> would change the <code>300px</code> value to whatever is entered.  For example:</p>
  <pre><code>&lt;MyComponent gridWrap={150} /&gt;
  </code></pre>
  <p>That would automatically inject the following css code into that component:</p>
  <pre><code>grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
  </code></pre>
  <p>Now, I know that it is possible to create custom props using <code>Styled-System</code>:  <a href="https://styled-system.com/custom-props/" rel="nofollow noreferrer">https://styled-system.com/custom-props/</a></p>
  <p>But I am having a hard time figuring out from the docs how I am supposed to create the custom <code>gridWrap</code> prop that I described above.</p>
  <p>Could anyone give me some pointers or show me how it could be done?</p>
  <p>Thanks.</p>