grid-template-areas invalid property value

Admin 1
Viewed 8374

I'm trying to create a contact form and thought about using a CSS grid.

This is what I what I want to achieve

Screen Shot

I don't want to use a table, because when it comes to smaller screens I want to have 1 column only and replace the items of the second column below the items of the first column of the same row.

The result on smaller screens would be:

Screen Shot]

I started creating this

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

The problem comes up with the areas, I get an invalid property value.

Screen shot

What needs to get fixed?

css html
1 Answers

The problem seems to be your grid-template-areas do not form a rectangular grid. If you lay it out row-by-row it looks like this:

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

Different rows have different numbers of cells. For a grid to be a "grid" every column should have the same number of rows and vice versa.

To get the result you are looking for you should duplicate the name on rows that you want to span the whole row, like this:

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

SEE ALSO: 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 ...
 "

So note that both the full grid-areas -spec and sub-areas using the same area-name within it must be rectangular.

To make a named grid-area span multiple columns you must include its name multiple times on the same row, in subsequent columns. Or you can make it span multiple rows by having its name in the same column of subsequent rows. Or both. The total sub-area assigned to any given area-name must be rectangular.

user_16399180
Related