网格模板区域无效的属性值

时间：2018-12-18 14:01:23

标签： html css

我正在尝试创建联系表单，并考虑使用CSS grid。

这就是我想要实现的目标

Screen Shot

我不想使用表格，因为在较小的屏幕上，我只希望有1列，并将第二列的内容替换为同一行的第一列的内容。

在较小屏幕上的结果为：

Screen Shot]

我开始创建此 

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

问题出在区域上，我得到的属性值无效。

Screen shot

需要解决什么？

2 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：0)

问题似乎是您的网格模板区域没有形成矩形网格。如果您将其逐行布置，则如下所示：

"lblFirstName lblLastName" 
"edtFirstName edtLastName" 
"lblCompany" 
"edtCompany" 
"lblEmail     lblPhone" 
"edtEmail     edtPhone" 
"lblMessage" 
"edtMessage" 
"btnSubmit";

不同的行有不同数量的单元格。要使网格成为“网格”，每一列都应具有相同的行数，反之亦然。

为了得到你正在寻找的结果 您应该在行上复制名称 你想跨越整行， 像这样：

"lblFirstName lblLastName" 
"edtFirstName edtLastName"
"lblCompany   lblCompany" 
"edtCompany   edtCompany"   
"lblEmail     lblPhone" 
"edtEmail     edtPhone" 
"lblMessage   lblMessage" 
"edtMessage   edtMessage" 
"btnSubmit    btnSubmit";

另见：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas :

 "The area that you create by chaining 
  the area names must be rectangular, 
  at this point there is no way to create 
  an L-shaped area ...
 "

因此请注意，完整的 grid-areas -spec 和其中使用相同 area-name 的子区域都必须是矩形。

要使命名的网格区域跨越多列，您必须在同一行的后续列中多次包含其名称。或者，您可以通过将其名称放在后续行的同一列中来使其跨越多行。 或两者。分配给任何给定区域名称的总子区域必须是矩形的。

相关问题
最新问题