Border After Each Row In CSS Grid

Answer :

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>