有没有更好的方法来实现这种布局？

Question

我一直在摸索，试图实现一开始看起来很简单的布局，但我仍然离我很远。基本上是水平居中的标题和下方的表单。我遇到问题的部分是将输入与标题垂直对齐。

下面是我的解决方案和代码的图片

.main {
    display: grid;
    grid-gap: 1.5rem;
    align-items: center;
    border-top: 9px solid #0993B8;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "title title title"
        "labelCid inputCid ."
        "labelPasswd inputPasswd ."
        ". inputSubmit ."
}

.main h3 {
    text-align: center;
    grid-area: title;
}

label[for="cid"] {
    justify-self: end;
    grid-area: labelCid;
}

label[for="password"] {
    justify-self: end;
    grid-area: labelPasswd;
}

input[id="cid"] {
    grid-area: inputCid;
}

input[id="password"] {
    grid-area: inputPasswd;
}

input[type="submit"] {
    justify-self: center;
    grid-area: inputSubmit;
}

<div class="main">
    <h3>Customer Portal Login</h3>
    <label for="cid">Customer ID</label>
    <label for="password">Password</label>
    <form id="loginForm"></form>
    <input form="loginForm" id="cid" name="cid" type="text" required>
    <input form="loginForm" id="password" name="password" type="password" required>
    <input type="submit" value="LOG IN">
</div>

这个问题是我在网格中包含了标题，我不能单独设置表单的样式来添加填充和背景颜色。有没有更好的方法来做到这一点？

Answer 1

为什么不把所有需要的元素都放在表单中，然后将display:grid应用到那个进行布局？

.main {
  width: 90%;
  margin: auto;
}

form {
  display: grid;
  background: grey;
  grid-gap: 1.5rem;
  padding-bottom: 1.5rem;
  ;
  align-items: center;
  border-top: 9px solid #0993B8;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "title title title" "labelCid inputCid ." "labelPasswd inputPasswd ." ". inputSubmit ."
}

.main h3 {
  text-align: center;
  grid-area: title;
}

label[for="cid"] {
  justify-self: end;
  grid-area: labelCid;
}

label[for="password"] {
  justify-self: end;
  grid-area: labelPasswd;
}

input[id="cid"] {
  grid-area: inputCid;
}

input[id="password"] {
  grid-area: inputPasswd;
}

input[type="submit"] {
  justify-self: center;
  grid-area: inputSubmit;
}

<div class="main">
  <h3>Customer Portal Login</h3>
  <form id="loginForm">
    <label for="cid">Customer ID</label>
    <label for="password">Password</label>

    <input form="loginForm" id="cid" name="cid" type="text" required>
    <input form="loginForm" id="password" name="password" type="password" required>
    <input type="submit" value="LOG IN">
  </form>
</div>