CSS 网格中输入和标签的基线对齐

Question

CSS 网格中输入和标签的基线对齐

kae*_*asu 6 css alignment baseline css-grid

我正在尝试使用 CSS 网格布局构建一个表单。标签显示在左列中，输入显示在右列中。该align-items属性设置为baseline。在 Chrome 中，标签和输入的文本在其基线上垂直对齐。但在 Firefox v94 中，标签的位置高于输入中的文本。

这是该问题的最小可重现示例：

<!DOCTYPE html>
<html>
<head>
  <style>
.login-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px 2px;
  align-items: baseline;
}

label, input {
  font-size: 3em;
}
  </style>
</head>
<body>

  <div class="login-grid">
    <label>username</label>
    <input type="text">
  </div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

此示例已在Codepen上发布。

当我将输入包装在 a 中时div，文本确实跨列对齐。我不想这样做，因为嵌套会影响尺寸。

我已经检查了许多关于对齐问题的其他帖子，但我没有找到与 CSS 网格相关的帖子。