仅指定css网格2列布局中的列位置

Question

我的目的是设置产品＆＃39;总是在左栏（第1栏），我的＆＃39;框＆＃39;始终显示在右栏（第2列）。但我的右列中的前几个单元格总是被跳过。我应该如何在右列中跳过任何单元格？

我不想设置每个单元格的col和row位置，我只想设置列，然后该框将从1行流到第n行。

您可以看到我的code pen here。

＆＃13;

＆＃13;

.two-col-grid-container {
  display: grid;
  grid-template-columns: 45% 45%;
  grid-column-gap: 20px;
}
.two-col-grid-container .product {
  grid-column: 1;
  background-color: green;
  border: 1px solid black;
}
.two-col-grid-container .box {
  grid-column: 2;
  background-color: pink;
  border: 1px solid black;
}

＆＃13;

<div class="two-col-grid-container">
  <div class="product">Product 1</div>
  <div class="product">Product 2</div>
  <div class="product">Product 3</div>
  <div class="product">Product 4</div>
  <div class="product">Product 5</div>
  <div class="product">Product 6</div>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>

</div>

＆＃13;

＆＃13;

＆＃13;