Equal padding between 3 and 4 columned grid

I am trying to only add inner paddings/spacing to three columns in a grid floating to each other. So the padding will not be applied to the left of the first column and to the right of the last column.

The illustration below demonstrate what I am trying to achieve:

For a grid with two columns, I simply did the following:

.grid .size-1of2 {
    width: 50%
}
.grid .column.size-1of2:first-of-type {
    padding: 0 5px 0 0;
}
.grid .column.size-1of2:last-of-type {
    padding: 0 0 0 5px;
}

And it worked, as the space between the columns what 10px spot-on! However, now when I try to do the same to a grid with 3, 4 and 5 columns. Things just get messy and mathy!

Here is what I have so far for the three columned grid:

.grid .size-1of3 {
    width: 33.33333%
}
.grid .column.size-1of3 {
    padding: 0 4px 0 4px;
}
.grid .column.size-1of3:first-of-type {
    padding: 0 7.5px 0 0;
}
.grid .column.size-1of3:last-of-type {
    padding: 0 0 0 8.5px;
}

The question is: What is the best approach to solve this problem? having 10px inner gab between the columns with maintaining consistent columns widths?