表格格式的网格模板区域

Question

我正在为我的网站设计联系表格。我正在使用grid-template-areas来对齐表单输入字段。但是在将网格区域添加到表单输入之后，表单字段除最后一个字段外消失。有人可以指导我做错了什么事。

有什么建议吗？

#home-f .contact-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}

#home-f .contact-text p {
  width: 90%;
  font-size: 1rem;
  margin: 1rem 0;
}

#home-f .contact-form {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email'
 'service'
 'message';
  grid-gap: 1.2rem;
}

#home-f .contact-form #name {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

#home-f .contact-form #email {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

#home-f .contact-form #service {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: service;
}

#home-f .contact-form #message {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: message;
}

    <section id="home-f" class="py-4">
      <div class="container">
        <div class="contact-wrapper">
          <div class="contact-text">
            <h2 class="m-heading">How May We Help You!</h2>
            <p>
              Grursus mal suada faci lisis Lorem ipsum consectetur elit. Grursus
              mal suada faci lisis Lorem ipsum consectetur elit.
            </p>
            <form action="">
              <div class="contact-form">
                <input
                  type="text"
                  name="name"
                  placeholder="Your Name *"
                  id="name"
                  class="form-control"
                />
                <input
                  type="text"
                  name="email"
                  placeholder="Email Address *"
                  id="email"
                  class="form-control"
                />
                <select name="service" id="service" class="form-control">
                  <option value="">Select a service...</option>
                  <option value="website-development">
                    Website Development
                  </option>
                  <option value="speed-optimization">Speed Optimization</option>
                  <option value="lead-generation">Lead Generation</option>
                  <option value="video-editing">
                    Video Editing / Voice over
                  </option>
                  <option value="graphics">Graphics & Design</option>
                  <option value="other">Other</option>
                </select>
                <textarea
                  name="message"
                  placeholder="Your Message"
                  id="message"
                  class="form-control"
                ></textarea>
              </div>
            </form>
          </div>
          <div class="contact-img">
            <img src="assets/img/contact.png" alt="" />
          </div>
        </div>
      </div>
    </section>

Answer 1

之所以会这样，是因为网格有两列，并且当您为子元素分配grid-template-areas时，您并不确定第二列的网格区域名称。您可以这样设置grid-template-areas：

grid-template-areas: 'name email'
'service service'
'message message';

如果您希望第二列为空，则必须用.填充它。

#home-f .contact-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}

#home-f .contact-text p {
  width: 90%;
  font-size: 1rem;
  margin: 1rem 0;
}

#home-f .contact-form {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email'
 'service service'
 'message message';
  grid-gap: 1.2rem;
}

#home-f .contact-form #name {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

#home-f .contact-form #email {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

#home-f .contact-form #service {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: service;
}

#home-f .contact-form #message {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: message;
}

<section id="home-f" class="py-4">
      <div class="container">
        <div class="contact-wrapper">
          <div class="contact-text">
            <h2 class="m-heading">How May We Help You!</h2>
            <p>
              Grursus mal suada faci lisis Lorem ipsum consectetur elit. Grursus
              mal suada faci lisis Lorem ipsum consectetur elit.
            </p>
            <form action="">
              <div class="contact-form">
                <input
                  type="text"
                  name="name"
                  placeholder="Your Name *"
                  id="name"
                  class="form-control"
                />
                <input
                  type="text"
                  name="email"
                  placeholder="Email Address *"
                  id="email"
                  class="form-control"
                />
                <select name="service" id="service" class="form-control">
                  <option value="">Select a service...</option>
                  <option value="website-development">
                    Website Development
                  </option>
                  <option value="speed-optimization">Speed Optimization</option>
                  <option value="lead-generation">Lead Generation</option>
                  <option value="video-editing">
                    Video Editing / Voice over
                  </option>
                  <option value="graphics">Graphics & Design</option>
                  <option value="other">Other</option>
                </select>
                <textarea
                  name="message"
                  placeholder="Your Message"
                  id="message"
                  class="form-control"
                ></textarea>
              </div>
            </form>
          </div>
          <div class="contact-img">
            <img src="assets/img/contact.png" alt="" />
          </div>
        </div>
      </div>
    </section>