输入忽略CSS网格

Question

我正在尝试构建一个CSS网格，该网格具有多个等宽的列，我可以轻松地通过grid-template-columns: repeat(12, 1fr);来实现。在我开始将input字段放到其中一列之前，此方法一直有效。然后，该列会扩展到比1/12大得多的位置，我不确定为什么或如何阻止它。

查看此小提琴： https://jsfiddle.net/mdc4bxLu/6/