我正在使用CSS网格布局，在尝试使文本框填充它所在的div容器时遇到了困难。它对某些控件（如GridView/GoogleMap）似乎工作得很好，但当我尝试使用TextBox时，它只填充一列的宽度，即使div填充了3-4列。
下面是网格容器的示例CSS，以及用于填充所有列的示例
.grid-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
-ms-grid-columns: repeat(2, 1fr);
grid-gap: 1em;
}
@media (min-width: 52em) {
.grid-container {
width: 95%;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
-ms-grid-columns: repeat(auto-fit, minmax(20em, 1fr));
grid-gap: 1em;
}
}
.item-max-columns {
grid-column: 1 / -1;
background-color: aqua;
}
此GooleMap控件在填充屏幕的所有列中正确显示（GridViews也正确显示）
<div class="item-max-columns">
<map:GoogleMap ID="JobMap" Width="100%" runat="server" DefaultAddress="Edmonton, Alberta"></map:GoogleMap>
<map:GoogleMarkers ID="JobMapMarkers" TargetControlID="JobMap" runat="server"></map:GoogleMarkers>
</div>
但是，当我尝试插入宽度为100%的TextBox时，它只填充一列
<div class="item-max-columns">
Project Description
<asp:TextBox ID="txtProjectDescription" runat="server" Enabled="true" TextMode="MultiLine" Width="100%"></asp:TextBox>
</div>
这里有一个指向JSFiddle的链接，它用输入字段而不是TextBox再现了问题。我希望输入字段/文本框跨越整个div标记，而不仅仅是第一列。
https://jsfidle.net/zuvdx2xn/
CSS宽度问题
我通过更新CSS来包括
.textbox{
width: calc(100% - 2em);
}
和Input/TextBox控件
<input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />
null
.grid-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
-ms-grid-columns: repeat(2, 1fr);
grid-gap: 1em;
}
.textbox{
width: calc(100% - 2em);
}
@media (min-width: 52em) {
.grid-container {
width: 95%;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
-ms-grid-columns: repeat(auto-fit, minmax(20em, 1fr));
grid-gap: 1em;
}
.textbox{
width: calc(100% - 2em);
}
}
.item-max-columns {
grid-column: 1 / -1;
background-color: aqua;
}<section class="grid-container">
<div class="item-max-columns">
<p>Project Description</p>
<input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />
</div>
<div class="item-max-columns">
<p>Instructions</p>
<input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />
</div>
</section>