インライングリッド線の項目を表示するには？

Krnsys：

私は私がこれまでのUI似を作成しようとしています、インライン2つのグリッドのアイテムを持って帰りたいと思います

あなたはgriditemDiv1要素でわかるように動的に追加し、私は彼らが現在どこgriditemDiv2で内容が滞在したいされています。

私は位置を使用して、単一のグリッド要素の下にそれらを持っていた：修正。私は必要なレイアウトを得ることができますいくつかのピクセルなどのトップが、画面サイズの変更など、その位置が変化します。

私が持っている唯一のアイデアは、それぞれの内容を持つ2つの異なるレイアウト登場インラインフィルとしてそれらを作るです。その他の代替ソリューションは、あなたを歓迎します:)あなたは私のアイデアが出て働くだろうと思われる場合。私は2つの格子要素がインラインで表示されるようにする方法を教えてください？

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

アンディ・ホフマン：

ここで、単一の使用一つのアプローチである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