Border after each row in CSS Grid - html

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>

Answer 2

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

Answer 3

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>