将列网格中的项目彼此左对齐

Question

有一个部分id="contact"，我试图在其中的一列中放置一个标题和一个简短的一句话描述，并在右列的输入字段下方放置一个带有提交按钮的电子邮件提交表单。我希望电子邮件输入元素覆盖整个右列，并使按钮左对齐到它下方的边缘。我有一个草图来显示我正在寻找的附件。

到目前为止，这部分完成了我现在想做的所有事情，但是底部元素下的顶部元素不是左边缘对齐，尽管类项目 .latest-from-here .input-email（嵌套在父部分 #contact 中）是 justify-self:start; align-self: center; .

https://codepen.io/holmedw/pen/KrvJEb

草图：

 #contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: left;
    grid-column-gap: 80px;
    margin-left: 80px;
    margin-right: 80px;
    height: 480px;
    align-items:center;
}

.latest-from-here .input-email {
    position:relative;
    z-index: -1;
    justify-self:start;
    align-self: center;
}

Answer 1

如果你删除了 justify-items: left;在#contact 中添加 width:100% 到您的输入字段，这将解决问题。

*{
box-sizing:border-box
}
#contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 80px;
    margin-left: 80px;
    margin-right: 80px;
    height: 480px;
    align-items:center;
}

.latest-from-here .input-email {
    position:relative;
    z-index: -1;
    justify-self:start;
    align-self: center;
}

.email{
width:100%

}

<section id="contact">
              <div class="latest-from-here">
                <h2>Get the latest from Aer</h2>
                <p>Don't miss out on new arrivals, offers and events.</p>
              </div>

              <div class="input-email">
                <form id="form" action="https://www.freecodecamp.com/email-submit">
                  <input name="email" id="email" type="email" placeholder="Enter your email" class="email" required/>
                  <div></div>
                  <input id="submit" type="submit" value="Submit" class="btn-submit"></input>                
              </form> 
              </div>
            </section>