title: Flexbox Grid System w/Margin Gutters
body: <p>I would love to get thoughts on how to layout a flexbox grid system with margin gutters. </p>
  
  <p>For example:</p>
  
  <p>In my pen below I have a row with <code>display:flex</code> and I want it to wrap so I used <code>flex-wrap:wrap</code>. That all works fine, but when I set a width of 25% to all of the columns I have to set a max-width of a calc(25% - 25px).</p>
  
  <p><a href="https://codepen.io/Jesders88/pen/rwbVwP?editors=1100" rel="noreferrer">https://codepen.io/Jesders88/pen/rwbVwP?editors=1100</a></p>
  
  <p>What I would like is to be able to have a margin gutter and not have to use calc or max-widths if that is possible. I also don't want to use percentages so that I can have a set margin in px units above each column and to the left when there is a gutter value. So basically what I want is if I were to set a 25px gutter and the number of items on a row to 4 I want those to have 25px gutter in between them, but stretch the whole width of the row if that makes sense. Any questions just let me know and I would be happy to elaborate.</p>