Grid breaking with monospace fonts?

[ryan-parag]

Not sure if anyone experienced this, but the grid seems to be breaking on me when font is styled to monospace.

Example in CodePen

Am I missing something? Or has anyone had experience in fixing this issue?

[Enweave]

Tl;dr: In your pen you could change scss on line 17 like this:

body {
	font-family: system-ui, sans-serif;
	&.u-font--monospace .demo-item{
		font-family: monospace, monospace;
		font-size: 1em;
	}
}

But why?: At the bottom it's a "spaces between inline-blocks" problem, which does not have solid solution, therefore many new grids use flex or whatever. However Toast grid, being inline-block grid:), uses negative margin to partially mitigate the issue. And, as I think, when you switch body font to "monospace" the width of a space between blocks is being changed differently, so the existing negative margin value no longer works...