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

Question

我一直在绞尽脑汁试图实现一开始看起来非常简单的布局，但我仍然离得很远。基本上是水平居中 header 和下面的表格。我遇到问题的部分是将输入与 header.

垂直对齐

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

.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>

这个问题是我在网格中包含了 header，我无法单独设置表单样式以添加填充和 background-color。有更好的方法吗？

Answer 1

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

.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>

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

Is there a better way to achieve this layout?

css

layout

css-grid