Как отобразить линейные позиции сетки?

Question

Я хочу встроить два элемента сетки, я пытаюсь создать подобный пользовательский интерфейс к этому

Как вы видите в griditemDiv1, элементы добавляются динамически, и я хочу, чтобы содержимое в griditemDiv2, чтобы остаться там, где они находятся в настоящее время.

У меня были они под одним элементом сетки, используя position: fix; top некоторые пиксели и т. д. c Я могу получить необходимый макет, но их положение меняется по мере изменения размера экрана.

Единственная идея, которая у меня есть, это сделать их как два разных макета, появляющихся внутри и заполненных соответствующим содержимым. Любое другое альтернативное решение, добро пожаловать :) Если вы думаете, моя идея сработает. Дайте мне знать, как сделать два элемента сетки встроенными?

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

jsFiddle