Html CSS网格布局：用更少的键入指定网格位置？

（我正在尝试使用CSS网格布局将这个数据输入页面从一个非常原始的CSS/HTML“table”布局转换为更好的布局）

按照惯例，我把它改为12栏宽。每个输入字段都有一个相同宽度的标签。换句话说，我的CSS目前非常重复：

.container{
显示：网格；
网格模板列：重复（12，最小值（0，1fr））；
栅隙：10px；
}
#签名标签{
网格柱：1/13；
网格行：2；
}
#签名名称{
网格柱：5/13；
网格行：2；
}
#PaymentNoLabel{
网格柱：1/13；
网格行：3；
}
#付款编号{
网格柱：5/13；
网格行：3；
}
#货币标签{
网格柱：1/13；
网格行：4；
}
#通货{
网格柱：5/13；
网格行：4；
}
* {
边框：1px实心#999；
}

签名姓名：
付款编号：
货币：

您可以像下面这样简化代码。您不一定需要12列

.container{
显示：网格；
网格模板列：重复（3，最小值（0，1fr））；
栅隙：10px；
}
.container>*：第n个子项（偶数）{
格构柱：跨度2；
边框：1px实心；
}
.container>*：第n个子项（奇数）{
/*不确定您是否需要此功能，但它允许
网格的全宽（如代码网格列）：1/13；
宽度：计算（300%+2*10px）*/
边框：1px纯红；
}

签名姓名：
付款编号：
货币：

谢谢。。。这正是我想要的。小麻烦：当我运行代码片段“SignatureName:”时，溢出到右边的框中。有什么方法可以确保换行而不是过度换行吗？@MikCorvent只需删除我添加注释的样式

width:300%…

。。在您最初的代码中，您使用了

网格列：1/13

，这也产生了相同的效果，这就是我不确定的原因