karansys :
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>
Andy Hoffman :
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>