CSS网格布局文本框不跨多列

Question

我正在使用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宽度问题

Answer 1

我通过更新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>