CSS网格-网格模板区域不将输入拉伸到末尾

Question

我正在处理一个联系人表单。对于输入字段，我使用带有grid-template-areas的CSS网格。我希望除消息字段外，每个字段都占用50%的空间。我希望它能占用100%的空间。所有其他字段都按预期工作，但消息字段也占用了50%的空间。

有什么建议吗？

* {
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>

Answer 1

问题出在field容器上。它是网格的直接子级，因此只有它才能跨越整个宽度，因为你的#message就在其中。所以你必须以它为目标。你可以这样做：

.field:last-of-type {
grid-area: message;
height: 120px;
width: 100%;
}
#message {
width: 100%;
}

textarea现在只需要填充其父对象的整个宽度。。但我会给它一个显式的类，使它更稳定。在此处查找一个工作示例。

顺便说一句，网格只适用于直接的孩子，而不适用于那里的孩子。因此，我建议为字段指定相应的grid-area属性。