How about this?

[mpa3b]

If I use your grid unit'd content's widths aren't equal. I use this code to fix it:

`.grid { margin: 0 -10px; }

.unit:first-of-type { padding-left: 10px; }

.unit:last-of-type { padding-right: 10px; }

[cobyism]

Thanks for opening an issue. To make sure I understand the issue, are you able to link to a minimal example showing the problem? perhaps using a tool like JSFiddle or CodePen?

[mpa3b]

http://codepen.io/anon/pen/BjMNmq

[cobyism]

Thanks for creating that example. Yeah, the way this is designed is to ensure that the whitespace created by the gutters are equal on the outside and the inside:

Unfortunately, this does mean that the inside space of each .unit isn’t equal. If you want to ensure you have equal width units, it’s probably easier to just override like you have above, or create a dedicated component (perhaps using flexbox, since that now has fairly wide browser support, and gives you more control than frameworks like this that rely on floats etc.)

[mpa3b]

It's not aout the gutters, these are fine, but the images. The sample images are equal, same dimensions of 400px. But the display shows difference between them: 295, 305, 295