添加一个grid-gap等于你的边界的宽度，然后考虑梯度来实现这一点：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-row-gap:2px;
  background:
    repeating-linear-gradient(to bottom,
      #0000 0 100px, #ffa94d 0 102px /*+2px here*/
    );
}

.box {
  padding: 1em;
}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

另一个想法是考虑将伪元素添加到第1个，第4个，第7个.. (3n + 1)个元素：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  overflow:hidden;
}

.box {
  position:relative;
  padding: 1em;
}
.box:nth-child(3n + 1)::after {
  content:"";
  position:absolute;
  bottom:0px;
  left:0;
  width:100vw;
  height:2px;
  background:#ffa94d;
}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

将表格想象成单元格的集合（非常类似于Excel电子表格）。您可以创建一个简单的单元格类，并将其附加到每个网格项中，以在不影响表格数据本身的情况下操作单元格。请考虑：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  
  grid-row-gap: 20px;
}


.cell {
  position: relative;
  border-bottom: 2px solid #ffa94d;
}

<div class="wrapper">
  <!-- Here is your first row -->
  <div class="cell">One</div>
  <div class="cell">Two</div>
  <div class="cell">Three</div>

  <!-- Here is your second row -->
  <div class="cell">Four</div>
  <!-- You can extend the line by the number of cells per row -->
  <div class="cell"></div>
  <div class="cell"></div>
  
  <!-- Organize your html into row groups to easily visualize them -->
  <!-- This will produce a blank row with no line -->
  <div></div>
  <div>-- blank row --</div>
  <div></div>
  
  <!-- You can also control where the line begins and ends -->
  <div class="box cell">First Column Only</div>
  <div></div> <!-- No cells here.. We just want to underline the first column -->
  <div></div>
  
  <!-- 2nd and 3rd columns only -->
  <div></div>
  <div class="cell">Second Column</div>
  <div class="cell">Third Column</div>
  
  
  
</div>

请注意，我只使用了一个网格行间距。如果你引入一个网格间距，或一个网格列间距，你的线将在列间距处断开（这可能是在某些情况下所期望的效果）。
的确，这是一种控制分隔网格的水平线的更复杂的方法，不太“编程”，更像是微观管理，但是，它确实提供了对将线引入网格的很好的控制。
其他的答案也是很好的选择！我只是想提供我的两分钱。

这可以通过绝对定位的伪元素来实现。它将覆盖grid-gap。您必须将其设置为宽宽度，这只是一个小黑客，然后将容器上的溢出设置为隐藏。

body {
  margin:0;padding:0;
}

.products {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap:20px;
  overflow:hidden;
  border-bottom:1px solid black;
}

.card-product {
  position:relative;
  text-align:center;
}
.card-product:after {
  content:'';
  position:absolute;
  border-bottom:1px solid black;
  top:-20px;left:0;
  height:1px;
  width:1000%;
}

<section class="products">

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>
  
  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

</section>

box类在网格子元素中放置一个边框，你可以让一个网格子元素增长到填充任意数量的列;下面有一个例子，其中definig类span 3，第四个网格子级跨越3列。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.box {
  border-bottom: 2px solid #ffa94d;
  padding: 1em;
}
.span3 {
  grid-column-end: span 3;
}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box span3">Four</div>
</div>