我在写联系表格。对于输入字段，我使用带有grid-template-areals的CSS网格。我希望每个字段占50%的空间，除了消息字段。我要它占100%的空间。所有其他字段都按预期工作，但message字段也占用了50%的空间。

有什么建议吗？

null

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.input-container {
  display: -ms-grid;
  display: grid;
      grid-template-areas: 'name email' 'subject phone' 'message message';
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 1.75rem;
}

.input-container .input {
  font-size: 0.875rem;
  background: #f2f3f5;
  border-color: #f2f3f5;
}

.input-container #name {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: name;
}

.input-container #email {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: email;
}

.input-container #subject {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: subject;
}

.input-container #phone {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: phone;
}

.input-container #message {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: message;
  height: 120px;
}

<div class="input-container">
  <div class="field">
    <input
      type="text"
      name="name"
      placeholder="Your Name"
      id="name"
      class="input form-control"
    />
  </div>
  <div class="field">
    <input
      type="text"
      name="email"
      placeholder="Email Address"
      id="email"
      class="input form-control"
    />
  </div>
  <div class="field">
    <input
      type="text"
      name="subject"
      placeholder="Subject"
      id="subject"
      class="input form-control"
    />
  </div>
  <div class="field">
    <input
      type="text"
      name="phone"
      placeholder="Phone"
      id="phone"
      class="input form-control"
    />
  </div>
  <div class="field">
    <textarea
      name="message"
      placeholder="Message"
      id="message"
      class="input form-control"
    ></textarea>
  </div>
</div>

null