Border after each row in CSS Grid

I had some success by using nth-of-type and switching the line to a different type (<span>).

I also added a first and sixth column for the line to span,
while the other items only occupy column 2-5.

* {
  box-sizing: border-box;
}

.outer {
  width: 80%;
  margin: 0 auto;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  justify-content: center;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper>div:nth-of-type(3n+1) {
  grid-column: 2;
}

.line {
  grid-column: 1/6;
  height: 2px;
  border-bottom: 1px solid black;
}

<div class="outer">
  <div class="wrapper">
    <div>1111111</div>
    <div>222</div>
    <div>3333333333</div>
    <span class="line"></span>
    <div>4444</div>
    <div>555555555</div>
    <div>6666666</div>
    <span class="line"></span>
    <div>77777</div>
    <div>888888888</div>
    <div>99</div>
  </div>
</div>

Instead of justify-content to center content you could add additional columns before and after your content, both with 1fr.

Then position the first div and the div after .line to the start at the second column.

Fiddle

* {
  box-sizing: border-box;
}

.outer {
  width: 80%;
  margin: 0 auto;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
}

.wrapper>div:not(.line) {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper > div:first-of-type,
.line + div {
  grid-column: 2;
}

.line {
  grid-column: 1 / -1;
  height: 1px;
  background: black;
}

<div class="outer">
  <div class="wrapper">
    <div>1111111</div>
    <div>222</div>
    <div>3333333333</div>
    <div class="line"></div>
    <div>4444</div>
    <div>555555555</div>
    <div>99999999999</div>
  </div>
</div>

Here's a responsive solution that works with a variable number of items and without adding silly hard coded divs. Basically every item has a line below, the complicated part is determining the last row items which must not have a line. The example uses flex-box (and LESS) but that's not relevant here, it would also work with grid.

.grid {
    display: flex;
}
.grid-item{
    position: relative;
    .one-col{
        flex-basis: 100%/1;
        &:nth-last-child(1){
            &:after{ border-bottom: 0; }
        }
    }
    .two-cols{
        flex-basis: 100%/2;
        &:nth-last-child(1),
        &:nth-last-child(2):nth-child(odd){
            &:after{ border-bottom: 0; }
        }
    }
    .three-cols{
        flex-basis: 100%/3;
        &:nth-last-child(1),
        &:nth-last-child(2):nth-child(3n+1),
        &:nth-last-child(2):nth-child(3n+2),
        &:nth-last-child(3):nth-child(3n+1){
            &:after{ border-bottom: 0; }
        }
    }
    .four-cols{
        flex-basis: 100%/4;
        &:nth-last-child(1),
        &:nth-last-child(2):nth-child(4n+1),
        &:nth-last-child(2):nth-child(4n+2),
        &:nth-last-child(2):nth-child(4n+3),
        &:nth-last-child(3):nth-child(4n+1),
        &:nth-last-child(3):nth-child(4n+2),
        &:nth-last-child(4):nth-child(4n+1){
            &:after{ border-bottom: 0; }
        }
    }

    @media screen and (max-width: @screen__sm) {
        .grid-item .one-col;
    }
    @media screen and (min-width: @screen__sm) and (max-width: (@screen__md - 1)) {
        .grid-item .two-cols;
    }
    @media screen and (min-width: @screen__md) and (max-width: (@screen__lg - 1)) {
        .grid-item .three-cols;
    }
    @media screen and (min-width: @screen__lg) {
        .grid-item .four-cols;
    }

    &:after{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: solid 1px black;
    }