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

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

}

}

First Name *

Last Name *

Company

E-Mail *

Phone

Your Message *