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?