Border after each row in CSS Grid

Question

I'm trying to make a border-bottom after each row using CSS grid with the content aligned to center. I can't get my head around it.

I want .line to fill the width of the entire .wrapper container.
How can I achieve that?

Here is the code:

* {
  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: repeat(3, auto) max-content;
  justify-content: center;
}

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

.line {
  grid-column-start: 1;
  grid-column-end: 6;
  height: 2px;
  border-bottom: 1px solid black;
  width: 100%;
}

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

Answer 1

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>