CSS输入框对齐求助：不受标签/错误信息影响保持水平对齐

之前的Grid方案问题出在使用1fr分配上下空间，导致错误信息变长时会撑开标签区域，同时无法保证输入框的水平对齐。下面的方案可以彻底解决这个问题，让标签和错误信息仅占用自身所需空间，同时确保每行的输入框严格对齐。

完整代码实现 #

CSS #

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form-group {
  display: contents; /* 取消.form-group的容器作用，让内部元素直接成为网格子项 */
}

.form-group label {
  font-weight: bold;
  align-self: end; /* 标签底部与输入框顶部对齐 */
  margin-bottom: 0.5rem; /* 标签与输入框的间距 */
}

.form-group input {
  width: 100%; /* 输入框填满列宽，可选 */
}

.form-group .error {
  color: #dc3545; /* 错误信息用红色标注，可选 */
  margin-top: 0.5rem; /* 输入框与错误信息的间距 */
}

HTML #

<form class="form">
  <div class="form-group">
    <label for="1">Input label</label>
    <input id="1" type="text">
  </div>
  <div class="form-group">
    <label for="2">Input label</label>
    <input id="2" type="text">
    <div class="error">Some error, maybe long</div>
  </div>
  <div class="form-group">
    <label for="3">Input label</label>
    <input id="3" type="text">
  </div>
  <div class="form-group">
    <label for="4">Input label</label>
    <input id="4" type="text">
    <div class="error">A really, really looooooong error message that wraps onto multiple lines and may never happen in real life</div>
  </div>
  <div class="form-group">
    <label for="5">Input label that is running onto multiple lines and is the root of the issue</label>
    <input id="5" type="text">
    <div class="error">A really, really looooooong error message that wraps onto multiple lines and may never happen in real life, A really, reeaaaaeally looooooong error message that wraps onto multiple lines and may never happen in real life</div>
  </div>
  <div class="form-group">
    <label for="6">Input label</label>
    <input id="6" type="text">
  </div>
</form>

方案原理 #

1. display: contents的作用：让.form-group不再作为独立的网格容器，其内部的label、input、error元素直接成为.form网格的子项，这样可以统一控制它们在网格中的位置。
2. 输入框对齐逻辑：所有input元素会自动排列到网格的同一行轨道中，不管上方的标签有多高、下方的错误信息有多长，输入框的水平位置始终保持一致。
3. 标签与错误信息的空间控制：标签和错误信息仅占用自身内容所需的垂直空间，不会被强制撑开，解决了原方案中标签区域被错误信息拉长的问题。
4. 细节优化：通过align-self: end让标签的底部与输入框顶部对齐，保证标签和输入框的排版紧凑；添加间距让各元素间的留白更合理。

兼容性说明 #

display: contents在Chrome、Firefox、Edge等现代浏览器中支持良好，若需兼容旧版浏览器（如IE），可改用Grid子网格（grid-template-rows: subgrid），但子网格仅在现代浏览器中支持，日常开发中display: contents的方案已足够覆盖绝大多数场景。

内容的提问来源于stack exchange，提问作者40Oleg