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