How come my grid has giant gaps?

So I am working on my CSS library, Spark, and I am trying to demonstrate the grid-layout capabilities ov it...
... However, I am displeased by the disproportionate amount ov whitespace between each column, and I don't know what is causing it.

I've tried setting both gap and grid-gap to 0 and have made sure that there are no margins and no padding on the grid, or the grid-items.

The CSS for  (that applies to*)  the highlighted grid boils down to this:

* { box-sizing:border-box; max-height:100%; max-width:100%; height:fit-content; } *[data-flow~="grid"] { grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(1, 1fr); grid-auto-columns:1fr; grid-auto-rows:1fr; display:grid; } *[data-flow~="row"] { grid-auto-flow:row; } *[data-padding="char"] { padding:1em; } .box-container { background-color:red; width:100%; } .box-container[data-flow~="grid"] { gap:1em; } 

The weird thing is is that when I change the flow to columns, the spacing looks as it should:

So... what's going on here? (Why does spacing work properly between rows and not columns?)
How can I fix this behavior?