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