如何內聯顯示網格行項目？

Question

我想內聯兩個網格項，我正在嘗試創建與此類似的 UI

正如您在 griditemDiv1 中看到的，元素是動態添加的，我希望 griditemDiv2 中的內容保留在當前位置。

我使用 position: fix; 將它們放在單個網格元素下。 頂部一些像素等我可以獲得所需的布局，但它們的位置會隨着屏幕尺寸的變化而變化。

我唯一的想法是將它們作為兩個不同的布局內聯出現並填充相應的內容。 任何其他替代解決方案，歡迎您:) 如果您認為我的想法可行。 讓我知道如何使兩個網格元素內聯顯示？

 #griditems1 { display:grid; grid-template-columns: 100px 80px 50px; padding: 10px } #griditems2 { display:grid; grid-template-columns: 100px 80px 50px; padding: 10px }

 <div id="mainDiv"> <div id="griditems1"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <div id="griditems2"> <div>11</div> <div>22</div> <div>33</div> <div>44</div> <div>55</div> <div>66</div> </div> </div>

Answer 1

這是一種使用單個grid和一些flexbox處理較小區域的方法。

 .grid-container { display: grid; grid-template-columns: 3fr 1fr 1fr; } .grid-container .item { display: flex; } .right .item { flex-direction: column; } .left .item { margin-bottom: .5rem; } .item [type="text"] { flex-grow: 1; }

 <div class="grid-container"> <div class="left"> <div class="item"> <button type="button">-</button> <input type="text" value="feature"> </div> <div class="item"> <button type="button">-</button> <input type="text" value="feature"> </div> <div class="item"> <button type="button">-</button> <input type="text" value="feature"> </div> <div class="item"> <button type="button">-</button> <input type="text" value="feature"> </div> <div class="item"> <button type="button">+</button> <input type="text" value="feature"> </div> </div> <div class="center"></div> <div class="right"> <div class="item"> <input type="date"> <button type="button">Borrow</button> </div> </div> </div>

js小提琴