Flex-box: Align last row to grid

Question

I have a simple flex-box layout with a container like:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

Answer 1

If you want a grid with some space between the items and the items starting without any initial space then this simple solution works:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

If you want the initial 5px space then just remove the negative margin :) Simple.

https://jsfiddle.net/b97ewrno/2/

The accepted answer, whilst good, it causes there to be no space between the elements on the second row..