Why doesn't Chrome (73.0.3683.103) place grid-items of a button in a row when grid-template-columns is specified?

Question

I have this button containing two span child-elements:

<button>
<span class="red"></span>
<span class="blue"></span>
</button>

The span elements are displayed side by side.

When I add a grid style to the button, the span elements are displayed below each other because that is the default for a grid. (The css styling code follows below.)

<button class="grid">
<span class="red"></span>
<span class="blue"></span>
</button>

When I add grid-template-columns: auto auto; to the grid style, I expected the span elements to be displayed side by side again. But in Chrome version 73.0.3683.103 that does not happen. Why?

<button class="grid columns">
<span class="red"></span>
<span class="blue"></span>
</button>

The css:

.red { background-color: red; }

.blue { background-color: blue; }

span {
  margin:  0.5rem;
  padding: 0 1rem;
  height:  1rem;
}

.grid { display: grid; }

.columns { grid-template-columns: auto auto; }

Here is an example.