网格布局表单中的元素不会对齐

如何解决网格布局表单中的元素不会对齐

我是新手，所以请原谅这个可能非常愚蠢的问题。我需要将右侧网格列中的联系元素与左侧列中的表单元素对齐。到目前为止，联系方式只是放在底部，我不知道为什么。

非常感谢任何帮助。

a = {'f':3,'t':5,'c':5}
ma =  max(a,key = a.get)

.form-list,.form-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
  padding-top: 1rem;
}

.form-group {
  grid-column: 1 / 2;
}

.form-details {
  grid-column: 2 / 3;
}

解决方法

我认为您误解了 grid 的工作原理，您需要一个包装器或容器来在网格中显示其内容，您所做的是将 <style> @import url("/styles/style.css"); </style> 放在元素本身上

display: grid

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
  padding-top: 1rem;
  align-items : flex-start;
}

.form-group {
  grid-column: 1;
}

.form-details {
  grid-column: 2;
}

.form-details h2 {
margin-top : 0;
}

,

您可以避免所有这些 css，只需使用 flexbox

.form-list,.form-contact {
  padding-top: 1rem;
}

main {
  display: flex;
}

<main>
<form action="" method="post">
  <div class="form-list">
    <div class="form-group">
      <label for="name" class="form-label">Name</label>
      <input id="name" name="name" type="text" placeholder="Your name" class="form-control" required />
    </div>

    <div class="form-group">
      <label for="email" class="form-label">Email</label>
      <input id="email" name="email" type="text" placeholder="[e-mail]" class="form-control" required />
    </div>

    <div class="form-group">
      <label for="message" class="form-label">Message</label>
      <textarea id="message" name="message" rows="4" class="message-control" required></textarea>
    </div>

    <div class="form-group">
      <button type="submit" class="button">Contact us</button>
    </div>
  </div>
</form>

<div class="form-contact">
  <div class="form-details">
    <h2>Contact</h2>
    <p><span>456 Random Street,</span><span>Sydney,</span>
      <span>Australia</span></p>
    <p><span>Phone: [phone]</span><span>Email: [e-mail]</span></p>
  </div>
</div>
</main>