为什么 Input 和 Form 不坚持 CSS 网格模板列？

Question

嘿，所以我尝试使用 CSS 网格使这个表格和输入表单看起来一样。

请看一下我的 jsfiddle：

https://jsfiddle.net/9j8zcreb/8/

它使用input { width: 100% } 修复了一些问题，但表单和输入的操作方式仍然与其他网格的工作方式大不相同。如您所见，尽管使用相同（或相似）的网格，但它们看起来并不相同，并且输入栏与表格/列表的宽度不同。

有什么线索吗？

我尝试将form 嵌套在具有.wrapper { display: grid } 的div 中，并且我尝试将form 设置为css 类而不是<form className="formgrid"> 等，但没有任何区别。

将表单嵌套在 css-grid 包装器中的操作非常奇怪，我必须为整个表单设置 grid-column: 1/5，但无法单独设置 input。

Answer 1

我可能已经通过在 CSS 中为每个输入标签指定 min-width 属性来解决这个问题。

input{padding} 也有一个我没有注意到的问题，导致输入更大且重叠。

目前还不清楚如何将min-width 设置为与其他 div 相同 - 可能使用事件侦听器并获取 document.element 宽度。