html – grid-template-areas无效的属性值

2019年7月28日 287次阅读

我正在尝试创建一个联系表单并考虑使用CSS网格.

这就是我想要实现的目标

我不想使用表格,因为当涉及到较小的屏幕时,我想只有1列,并将第二列的项目替换为同一行的第一列的项目.

较小屏幕上的结果将是：

]

我开始创造这个

#contactForm {
  display: grid;
  grid-template-areas: "lblFirstName lblLastName" "edtFirstName edtLastName" "lblCompany" "edtCompany" "lblEmail lblPhone" "edtEmail edtPhone" "lblMessage" "edtMessage" "btnSubmit";
  grid-gap: 20px;
  padding: 100px;
}

label[for=firstname] {
  grid-area: lblFirstName;
}

label[for=lastName] {
  grid-area: lblLastName;
}

label[for=company] {
  grid-area: lblCompany;
}

label[for=email] {
  grid-area: lblEmail;
}

label[for=phone] {
  grid-area: lblPhone;
}

label[for=message] {
  grid-area: lblMessage;
}

input[name=firstname] {
  grid-area: edtFirstName;
}

input[name=lastName] {
  grid-area: edtLastName;
}

input[name=company] {
  grid-area: edtCompany;
}

input[name=email] {
  grid-area: edtEmail;
}

input[name=phone] {
  grid-area: edtPhone;
}

input[name=message] {
  grid-area: edtMessage;
}

input[type=submit] {
  grid-area: btnSubmit;
}

.inputTitle {
  font-size: 20px;
}

.txtInput {
  width: 100%;
  padding: 8px 14px;
  outline: none;
  border-radius: 3px;
  border: 1px solid #d1d5da;
  box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075);
  background: #fafbfc;
  color: #24292e;
}

#contactSubmitBtn {
  cursor: pointer;
  border: none;
  border-radius: 3px;
  font-weight: 300px;
  font-size: 18px;
  padding: 10px 16px;
  background: #4285f4;
  color: #ffffff;
  transition: 0.3s;
}

#contactSubmitBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 3px #343434;
  background: #5396f5;
  transition: 0.3s;
}

#contactMessageInput {
  resize: none;
}
<form id="contactForm" @submit="submitContactForm" action="/" method="post">

  <label class="inputTitle" for="firstname">First Name *</label>
  <input class="txtInput" type="text" name="firstname" required>

  <label class="inputTitle" for="lastname">Last Name *</label>
  <input class="txtInput" type="text" name="lastname" required>

  <label class="inputTitle" for="company">Company</label>
  <input class="txtInput" type="text" name="company">

  <label class="inputTitle" for="email">E-Mail *</label>
  <input class="txtInput" type="email" name="email" required>

  <label class="inputTitle" for="phone">Phone</label>
  <input class="txtInput" type="text" name="phone">

  <label class="inputTitle" for="message">Your Message *</label>
  <textarea id="contactMessageInput" class="txtInput" name="message" required rows="10" cols="50"></textarea>

  <input id="contactSubmitBtn" type="submit" value="Send">
</form>

问题出现在这些区域,我得到了无效的属性值.

需要修复什么？

最佳答案 @TemaniAfif提供了一个有效的解决方案但删除了他的帖子.

简短回答：

对于只有一列而不是两列的行,我必须编写“myArea myArea”以使每行的列数相同.

答案很长：如果可以缩短CSS代码,请告诉我！

#contactForm {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas:
  "lblFirstName lblLastName"
  "edtFirstName edtLastName"
  "lblCompany lblCompany"
  "edtCompany edtCompany"
  "lblEmail lblPhone"
  "edtEmail edtPhone"
  "lblMessage lblMessage"
  "edtMessage edtMessage"
  "btnSubmit btnSubmit";
  grid-gap: 20px;
  padding: 100px 300px;
}

label[for=firstname]
{
  grid-area: lblFirstName;
}

label[for=lastName]
{
  grid-area: lblLastName;
}

label[for=company]
{
  grid-area: lblCompany;
}

label[for=email]
{
  grid-area: lblEmail;
}

label[for=phone]
{
  grid-area: lblPhone;
}

label[for=message]
{
  grid-area: lblMessage;
}

input[name=firstname]
{
  grid-area: edtFirstName;
}

input[name=lastName]
{
  grid-area: edtLastName;
}

input[name=company]
{
  grid-area: edtCompany;
}

input[name=email]
{
  grid-area: edtEmail;
}

input[name=phone]
{
  grid-area: edtPhone;
}

textarea[name=message]
{
  grid-area: edtMessage;
}

input[type=submit]
{
  grid-area: btnSubmit;
}

.inputTitle {
  font-size: 20px;
}

.txtInput {
  outline: none;
  padding: 14px 10px;
  border-radius: 3px;
  border: 1px solid #d1d5da;
  box-shadow: inset 0 1px 2px rgba(27,31,35,.075);
  background: #fafbfc;
  color: #24292e;
}

#contactSubmitBtn {
  padding: 10px;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  font-weight: 300px;
  font-size: 18px;
  background: #4285f4;
  color: #ffffff;
  transition: 0.3s;
}

#contactSubmitBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 3px #343434;
  background: #5396f5;
  transition: 0.3s;
}

#contactMessageInput {
  resize: none;
}

@media only screen and (max-width: 1300px) {
  #contactForm {
    padding: 100px 200px;
  }
}

@media only screen and (max-width: 1100px) {
  #contactForm {
    padding: 100px 150px;
  }
}

@media only screen and (max-width: 900px) {
  #contactForm {
    padding: 100px 100px;
  }
}

@media only screen and (max-width: 700px) {
  #contactForm {
    padding: 100px 50px;
  }
}

@media only screen and (max-width: 500px) {
  #contactForm {
    grid-template-columns: 100%;
      grid-template-areas:
      "lblFirstName"
      "edtFirstName"
      "lblLastName"
      "edtLastName"
      "lblCompany"
      "edtCompany"
      "lblEmail"
      "edtEmail"
      "lblPhone"
      "edtPhone"
      "lblMessage"
      "edtMessage"
      "btnSubmit";
  }
}
<form id="contactForm" @submit="submitContactForm" action="/" method="post">

  <label class="inputTitle" for="firstname">First Name *</label>
  <input class="txtInput" type="text" name="firstname" required>

  <label class="inputTitle" for="lastname">Last Name *</label>
  <input class="txtInput" type="text" name="lastname" required>

  <label class="inputTitle" for="company">Company</label>
  <input class="txtInput" type="text" name="company">

  <label class="inputTitle" for="email">E-Mail *</label>
  <input class="txtInput" type="email" name="email" required>

  <label class="inputTitle" for="phone">Phone</label>
  <input class="txtInput" type="text" name="phone">

  <label class="inputTitle" for="message">Your Message *</label>
  <textarea id="contactMessageInput" class="txtInput" name="message" required rows="10" cols="50"></textarea>

  <input id="contactSubmitBtn" type="submit" value="Send">
</form>
点赞