How to display grid line items inline?

user_11272449 0
Viewed 820

I want to bring two grid items inline, I am trying to create UI similiar to this enter image description here

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>

css html jquery javascript
1 Answers

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

user_9492170
Related