I would love to get thoughts on how to layout a flexbox grid system with margin gutters.
For example:
In my pen below I have a row with display:flex and I want it to wrap so I used flex-wrap:wrap. 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).
https://codepen.io/Jesders88/pen/rwbVwP?editors=1100
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.