How to display grid line items inline?

Question

I want to bring two grid items inline, I am trying to create UI similiar to this

As you see in griditemDiv1 elements are added dynamically and I want the contents in griditemDiv2 to stay where they are currently.

I had them under single grid element using position: fix; top some pixels etc I can get the required layout, but their position changes as screen size changes.

The only idea I have is make them as two different layout appearing inline and fill with respective contents. Any other alternative solution, you are welcome :) If you think my idea would work out. Let me know how to make two grid elements appear inline?

 #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

Here is one approach which uses a single grid and a bit of flexbox addressing the smaller areas.

 .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>

jsFiddle