CSS网格未在指定的网格列中显示项目

Question

我有一个嵌入式表单，具有三列布局。

尽管使用了网格，但是我试图使“提交”按钮位于中间（因此第二列），但是不确定为什么我当前的方法不起作用：

#form {
  display: grid;
  grid-template-areas: 'inputs1 inputs2 textarea' 'inputs1 inputs2 submit';
  justify-content: center;
  grid-auto-columns: 25%;
}

<form id="form">

  <div class="responsiveRow">
    <span> Text 1:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow">
    <span> Text 2:</span>
    <input type="text" />
  </div>

  <div class="responsiveRow">
    <span> Textarea:</span>
    <textarea cols="10" rows="10"> </textarea>
  </div>

  <div class="responsiveRow">
    <span> Text 3:</span>
    <input type="text" />
  </div>

  <div class="responsiveRow">
    <span> Text 4:</span>
    <input type="text" />
  </div>

  <div class="responsiveRow">
    <input type="submit">
  </div>


</form>

我无法更改表单的HTML，以上是嵌入后表单代码的显示方式。

任何帮助将不胜感激。

所需结果：

Answer 1

您使用网格区域来确定将项目放置在网格中的位置-

下面的示例应该是您所需要的。

.responsiveRow:nth-of-type(3) {grid-area: myArea;}
.responsiveRow:nth-of-type(6) {grid-area:centered;}
.responsiveRow{border: 1px solid #000;}
#form{
    display: grid;
    grid-template-areas: '. . myArea' '. . myArea' '. centered .';
    justify-content: center;
    grid-auto-columns: 33%;
}

/*remove the grid on mobiles*/
@media all and (max-width:540px){
  #form{
    display:block;
  }
}

<form id="form">

  <div class="responsiveRow">
    <span> Text 1:</span>
    <input type="text"/>
  </div>
  <div class="responsiveRow">
    <span> Text 2:</span>
    <input type="text"/>
  </div>
  
    <div class="responsiveRow">
    <span> Textarea:</span>
    <textarea cols="10" rows="10"> </textarea>
  </div>
  
    <div class="responsiveRow">
    <span> Text 3:</span>
    <input type="text"/>
  </div>
  
    <div class="responsiveRow">
    <span> Text 4:</span>
    <input type="text"/>
  </div>
  
    <div class="responsiveRow">
    <input type="submit">
  </div>
  
  
</form>

Answer 2

尝试一下：

#form {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}
#text-area {
  grid-column: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
#button {
  grid-column: 2;
}

<form id="form">
  <div class="responsiveRow">
    <span> Text 1:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow">
    <span> Text 2:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow" id="text-area">
    <span> Textarea:</span>
    <textarea cols="10" rows="10"> </textarea>
  </div>
  <div class="responsiveRow">
    <span> Text 3:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow">
    <span> Text 4:</span>
    <input type="text" />
  </div>
  <div class="responsiveRow" id="button">
    <input type="submit">
  </div>
</form>

这里是jsfiddle