17370845950

表单元素在CSS Grid中高度不一致的主因是默认盒模型、内边距、字体及行高差异，且align-items: stretch仅对无显式高度的子项生效；需统一box-sizing: border-box、设min-height而非height、同步font-size/line-height/padding，并对textarea单独处理。

表单元素在 CSS Grid 布局中高度不一致，常见原因是不同控件（如 input、select、textarea、button）默认的盒模型、内边距、字体大小或行高差异较大，即使设置了 align-items: stretch，它们仍可能“看起来”没拉齐——因为 stretch 默认只对**无明确高度设置**的子项生效，且受 min-height、box-sizing 和某些浏览器默认样式影响。

确保所有表单元素 box-sizing 为 border-box

这是对齐的基础。默认情况下部分浏览器对表单控件使用 content-box，导致 padding 和 border 计入总高度之外，破坏拉伸效果。

建议统一重置：

显式设置最小高度或高度（配合 stretch 使用）

align-items: stretch 不会强行拉伸已设固定高度（如 height: 40px）的元素；但若只设 min-height，它就能在网格轨道允许范围内向上拉伸。

推荐写法：

这样既保证最小可用尺寸，又允许 grid 在必要时拉伸填充轨道。

统一字体、行高与内边距

即使高度拉齐，视觉上仍可能错位，比如 select 下拉箭头位置偏下、textarea 行高过大等。需手动对齐基线：

• 设置相同 font-family 和 font-size（例如 16px）
• 将 line-height 设为与 min-height 匹配（如 line-height: 40px），对单行控件更有效
• 用 padding 替代 height 控制尺寸，例如 padding: 12px 16px 比 height: 40px 更可控

对 textarea 等多行元素做特殊处理

textarea 天然支持多行，stretch 对它生效较弱。解决方法：

• 去掉 rows 属性，改用 min-height + resize: vertical
• 添加 vertical-align: top 防止基线对齐偏差
• 必要时用 grid-row 单独控制其跨行，或包裹一层 div 再设 display: flex; align-items: stretch